/* ==================================================================
   resume.css — the CV document, the six templates, and print rules.

   Everything the CV shows is sized from a handful of custom properties
   set on .paper by main.js, so one set of rules covers every template:

     --fs      base font size (pt)
     --lh      line height
     --gap     space between sections (multiplier)
     --accent  template colour
     --font    font stack
     --pad-x   horizontal page margin (mm)
     --pad-y   vertical page margin (mm)
     --page-w  page width (mm)
     --side-fg text colour inside a coloured sidebar
   ================================================================== */

/* ---------- the sheet ------------------------------------------------- */
.paper {
  --fs: 10.5pt;
  --lh: 1.45;
  --gap: 1;
  --accent: #2563eb;
  --font: system-ui, sans-serif;
  --pad-x: 14mm;
  --pad-y: 12mm;
  --page-w: 210mm;
  --page-h: 297mm;
  --side-fg: #ffffff;
  /* Templates that put a colour panel against the paper edge zero these. */
  --pad-l: var(--pad-x);
  --pad-r: var(--pad-x);

  --t-name:    calc(var(--fs) * 2.05);
  --t-head:    calc(var(--fs) * 1.1);
  --t-section: calc(var(--fs) * 0.95);
  --t-body:    var(--fs);
  --t-small:   calc(var(--fs) * 0.88);

  position: relative;
  width: var(--page-w);
  min-height: var(--page-h);
  background: #ffffff;
  color: #1b1f24;
  padding: var(--pad-y) var(--pad-r) var(--pad-y) var(--pad-l);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 14px 44px rgba(0, 0, 0, .38);
  overflow-wrap: break-word;
}

.paper * { box-sizing: border-box; }

/* ---------- header ---------------------------------------------------- */
.cv-head {
  display: flex;
  align-items: center;
  gap: 6mm;
  margin-bottom: calc(var(--gap) * 5mm);
}

.cv-head-text { min-width: 0; flex: 1; }

.cv-name {
  margin: 0;
  font-size: var(--t-name);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.cv-headline {
  margin: calc(var(--fs) * 0.28) 0 0;
  font-size: var(--t-head);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.cv-contact {
  list-style: none;
  margin: calc(var(--fs) * 0.55) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--fs) * 0.22) 4.5mm;
  font-size: var(--t-small);
  color: #4a5260;
}

.cv-contact li { position: relative; }

.cv-photo-wrap { flex: none; }

.cv-photo {
  width: 30mm;
  height: 30mm;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ---------- sections -------------------------------------------------- */
.cv-main > .cv-section:last-child,
.cv-side > .cv-section:last-child { margin-bottom: 0; }

.cv-section { margin-bottom: calc(var(--gap) * 4.6mm); }

.cv-section-title {
  margin: 0 0 calc(var(--fs) * 0.72) 0;
  font-size: var(--t-section);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.cv-section-body > *:last-child { margin-bottom: 0; }

/* ---------- entries --------------------------------------------------- */
.cv-entry { margin-bottom: calc(var(--fs) * 1.05); }
.cv-entry:last-child { margin-bottom: 0; }
.cv-entry-tight { margin-bottom: calc(var(--fs) * 0.72); }

.cv-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4mm;
}

.cv-entry-lead { min-width: 0; }

.cv-role {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.32;
}

.cv-org {
  font-size: var(--t-body);
  font-weight: 500;
  color: #3d4552;
  line-height: 1.32;
}

.cv-dates {
  flex: none;
  font-size: var(--t-small);
  color: #5a6472;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cv-meta {
  font-size: var(--t-small);
  color: #5a6472;
  margin-top: calc(var(--fs) * 0.1);
}

.cv-p {
  margin: calc(var(--fs) * 0.32) 0 0;
  font-size: var(--t-body);
}

.cv-ul {
  margin: calc(var(--fs) * 0.36) 0 0;
  padding-left: 4.6mm;
  list-style: none;
}

.cv-ul li {
  position: relative;
  font-size: var(--t-body);
  margin-bottom: calc(var(--fs) * 0.16);
}

.cv-ul li::before {
  content: "";
  position: absolute;
  left: -3.4mm;
  top: calc(var(--fs) * 0.58);
  width: 1.5mm;
  height: 1.5mm;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* ---------- inline runs (skills, languages, interests) ---------------- */
.cv-inline {
  margin: 0 0 calc(var(--fs) * 0.3) 0;
  font-size: var(--t-body);
  line-height: 1.5;
}

.cv-inline-label { font-weight: 700; }

.cv-tag { white-space: normal; }

.cv-tag:not(:last-child)::after {
  content: " · ";
  color: #9aa3b0;
  font-weight: 400;
}

.cv-inline .cv-tag:not(:last-child)::after { content: ", "; }

/* ---------- sidebar lists --------------------------------------------- */
.cv-skillgroup { margin-bottom: calc(var(--fs) * 0.6); }
.cv-skillgroup:last-child { margin-bottom: 0; }

.cv-skillgroup-title {
  margin: 0 0 calc(var(--fs) * 0.22) 0;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: .68;
}

.cv-skilllist { list-style: none; margin: 0; padding: 0; }

.cv-skill {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3mm;
  font-size: var(--t-body);
  margin-bottom: calc(var(--fs) * 0.22);
}

.cv-skill-name { min-width: 0; }

.cv-skill-level {
  flex: none;
  font-size: var(--t-small);
  opacity: .7;
  white-space: nowrap;
}

/* ---------- links ------------------------------------------------------ */
.paper a { color: inherit; text-decoration: none; }
.paper a:hover { text-decoration: underline; }

/* ==================================================================
   TEMPLATES
   ================================================================== */

/* ---------- Classic ---------------------------------------------------- */
.tpl-classic .cv-head {
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 0;
}
.tpl-classic .cv-head-text { flex: none; width: 100%; }
.tpl-classic .cv-contact { justify-content: center; }
.tpl-classic .cv-section-title {
  border-bottom: 0.4mm solid var(--accent);
  padding-bottom: calc(var(--fs) * 0.28);
}
.tpl-classic .cv-role { font-weight: 700; }

/* ---------- Modern ----------------------------------------------------- */
/* The colour panel runs to the paper edge, so the sheet's side padding is
   moved into the sidebar itself. */
.tpl-modern { --pad-l: 0mm; --pad-r: 0mm; }

.tpl-modern .cv-grid {
  display: grid;
  grid-template-columns: 66mm 1fr;
  align-items: stretch;
}

.tpl-modern .cv-side {
  background: var(--accent);
  color: var(--side-fg);
  padding: var(--pad-y) 7mm var(--pad-y) var(--pad-x);
}

.tpl-modern .cv-main {
  padding: var(--pad-y) var(--pad-x) var(--pad-y) 7mm;
  min-width: 0;
}

.tpl-modern .cv-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: calc(var(--gap) * 5mm);
}
.tpl-modern .cv-name {
  font-size: calc(var(--fs) * 1.7);
  color: var(--side-fg);
}
.tpl-modern .cv-headline {
  color: var(--side-fg);
  opacity: .88;
  font-weight: 500;
}
.tpl-modern .cv-contact {
  flex-direction: column;
  gap: calc(var(--fs) * 0.26);
  color: var(--side-fg);
  opacity: .92;
  margin-top: calc(var(--fs) * 0.75);
  font-size: var(--t-small);
}
.tpl-modern .cv-photo { border: 0.6mm solid rgba(255, 255, 255, .45); }

.tpl-modern .cv-side .cv-section-title {
  color: var(--side-fg);
  opacity: .82;
  font-size: calc(var(--fs) * 0.85);
}
.tpl-modern .cv-side .cv-role,
.tpl-modern .cv-side .cv-org { color: var(--side-fg); }
.tpl-modern .cv-side .cv-meta,
.tpl-modern .cv-side .cv-dates { color: var(--side-fg); opacity: .78; }

.tpl-modern .cv-main .cv-section-title {
  color: #1b1f24;
  border-bottom: 0.35mm solid #dfe3ea;
  padding-bottom: calc(var(--fs) * 0.28);
}

/* ---------- Minimal ---------------------------------------------------- */
.tpl-minimal .cv-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-bottom: calc(var(--fs) * 1.1);
  border-bottom: 0.3mm solid #d8dde5;
}
.tpl-minimal .cv-head-text { flex: none; width: 100%; }
.tpl-minimal .cv-name {
  font-size: calc(var(--fs) * 1.85);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.tpl-minimal .cv-headline { color: #5a6472; font-weight: 400; }
.tpl-minimal .cv-contact { color: #6b7481; }
.tpl-minimal .cv-section-title {
  color: #6b7481;
  font-size: calc(var(--fs) * 0.82);
  font-weight: 600;
  letter-spacing: 0.14em;
}
.tpl-minimal .cv-role { font-weight: 600; }
.tpl-minimal .cv-org { color: #5a6472; font-weight: 400; }
.tpl-minimal .cv-ul li::before { opacity: .35; }

/* ---------- Bold ------------------------------------------------------- */
.tpl-bold .cv-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: var(--accent);
  color: var(--side-fg);
  padding: 7mm 7mm 6mm;
  border-radius: 2mm;
  margin-bottom: calc(var(--gap) * 6mm);
}
.tpl-bold .cv-head-text { flex: none; width: 100%; }
.tpl-bold .cv-name {
  font-size: calc(var(--fs) * 2.5);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--side-fg);
}
.tpl-bold .cv-headline { color: var(--side-fg); opacity: .9; font-weight: 500; }
.tpl-bold .cv-contact { color: var(--side-fg); opacity: .9; }
.tpl-bold .cv-photo { border: 0.7mm solid rgba(255, 255, 255, .5); }
.tpl-bold .cv-section-title {
  color: #1b1f24;
  border-bottom: 0.8mm solid var(--accent);
  padding-bottom: calc(var(--fs) * 0.26);
  letter-spacing: 0.05em;
}
.tpl-bold .cv-role { font-size: calc(var(--fs) * 1.04); }

/* ---------- Compact ---------------------------------------------------- */
.tpl-compact .cv-grid {
  display: grid;
  grid-template-columns: 1fr 56mm;
  gap: 0 7mm;
  align-items: start;
}

.tpl-compact .cv-head {
  padding-bottom: calc(var(--fs) * 0.85);
  border-bottom: 0.4mm solid var(--accent);
  margin-bottom: calc(var(--gap) * 4mm);
}
.tpl-compact .cv-name { font-size: calc(var(--fs) * 1.72); }

.tpl-compact .cv-side {
  background: #f4f6f9;
  border-radius: 1.6mm;
  padding: 5mm 4.5mm;
}

.tpl-compact .cv-section { margin-bottom: calc(var(--gap) * 3.4mm); }
.tpl-compact .cv-section-title {
  font-size: calc(var(--fs) * 0.84);
  letter-spacing: 0.08em;
  margin-bottom: calc(var(--fs) * 0.5);
}
.tpl-compact .cv-side .cv-section-title { color: #2b3340; }
.tpl-compact .cv-side .cv-skill { margin-bottom: calc(var(--fs) * 0.12); }
.tpl-compact .cv-entry { margin-bottom: calc(var(--fs) * 0.8); }
.tpl-compact .cv-ul { padding-left: 4mm; }
.tpl-compact .cv-ul li::before { left: -3mm; }

/* ---------- Academic --------------------------------------------------- */
.tpl-academic .cv-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding-bottom: calc(var(--fs) * 0.8);
  border-bottom: 0.4mm double #2b3340;
}
.tpl-academic .cv-head-text { flex: none; width: 100%; }
.tpl-academic .cv-name {
  font-size: calc(var(--fs) * 1.7);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tpl-academic .cv-headline { color: #2b3340; font-style: italic; font-weight: 400; }
.tpl-academic .cv-contact { justify-content: center; color: #4a5260; }
.tpl-academic .cv-section-title {
  color: #1b1f24;
  text-align: center;
  font-size: calc(var(--fs) * 0.92);
  letter-spacing: 0.12em;
  border-bottom: 0.25mm solid #c8cfd8;
  padding-bottom: calc(var(--fs) * 0.24);
}
.tpl-academic .cv-role { font-weight: 700; }
.tpl-academic .cv-org { font-style: italic; font-weight: 400; }
.tpl-academic .cv-section-publications .cv-role { font-weight: 600; }

/* ==================================================================
   PRINT — this is what becomes the exported PDF.
   Vertical page margins come from @page (set by main.js to match
   --pad-y); horizontal margins come from the paper's own padding.
   That way every page gets identical margins, not just the first.
   ================================================================== */

#print-root { display: none; }

@media print {
  html, body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }

  #app { display: none !important; }

  #print-root {
    display: block !important;
    margin: 0;
    padding: 0;
  }

  /* Vertical margins come from @page so that page 2, 3, … get them too.
     Horizontal margins stay on the paper, which also lets a sidebar
     template bleed its colour panel to the paper edge. */
  #print-root .paper {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0 var(--pad-r) 0 var(--pad-l);
    box-shadow: none;
    border-radius: 0;
    transform: none;
    overflow: visible;
  }

  /* Keep entries and headings from being sliced across pages. */
  .cv-entry,
  .cv-skillgroup,
  .cv-section-summary .cv-section-body {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .cv-section-title,
  .cv-role,
  .cv-skillgroup-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  .cv-section { break-inside: auto; }

  .tpl-modern .cv-grid,
  .tpl-compact .cv-grid { break-inside: auto; }

  .tpl-modern .cv-side,
  .tpl-compact .cv-side {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cv-head,
  .cv-section-title {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .paper a { text-decoration: none; }
}

/* Printing is the one place we always want background colours kept. */
.paper,
.paper * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}