/*
 * Printable resume templates (letter or A4). Units are pt, as in the original react-pdf
 * templates. Every font size is multiplied by --dt and every margin, padding and
 * gap by --ds (the resume's density); widths, borders and photo sizes are not.
 * Colour roles (--primary, --titles, --subtitles, --badge, --skill) and the font
 * come from the resume theme (Components::ResumeDocument).
 *
 * Unscoped rules describe Corporate; other templates override under .tpl-<name>.
 */

@page { margin: 0; } /* size comes from the resume's paper size (ResumeDocument) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #e7e5e1; }

body {
  color: #333;
  font-family: var(--font);
  font-style: var(--font-style);
  font-weight: var(--font-weight);
  line-height: 1.3;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  text-rendering: optimizeLegibility;
}

.page {
  --f7: calc(7pt * var(--dt)); --f8: calc(8pt * var(--dt)); --f9: calc(9pt * var(--dt));
  --f10: calc(10pt * var(--dt)); --f11: calc(11pt * var(--dt)); --f12: calc(12pt * var(--dt));
  --f13: calc(13pt * var(--dt)); --f14: calc(14pt * var(--dt)); --f16: calc(16pt * var(--dt));
  --f22: calc(22pt * var(--dt)); --f24: calc(24pt * var(--dt)); --f26: calc(26pt * var(--dt));
  --s2: calc(2pt * var(--ds)); --s3: calc(3pt * var(--ds)); --s4: calc(4pt * var(--ds));
  --s5: calc(5pt * var(--ds)); --s6: calc(6pt * var(--ds)); --s8: calc(8pt * var(--ds));
  --s10: calc(10pt * var(--ds)); --s12: calc(12pt * var(--ds)); --s14: calc(14pt * var(--ds));
  --s15: calc(15pt * var(--ds)); --s16: calc(16pt * var(--ds)); --s18: calc(18pt * var(--ds));
  --s20: calc(20pt * var(--ds)); --s25: calc(25pt * var(--ds)); --s30: calc(30pt * var(--ds));
  --s35: calc(35pt * var(--ds));

  background: #fff;
  display: flex;
  flex-direction: column;
  font-size: var(--f10);
  margin: 0 auto;
  min-height: var(--page-height, 297mm);
  padding: var(--s20) var(--s30);
  width: var(--page-width, 210mm);
}

@media screen and (min-width: 236mm) {
  html { padding: 24px 0; }
  .page { box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 12px 32px -12px rgb(0 0 0 / 0.25); }
}

@media print {
  html { background: none; padding: 0; }
  .page { box-shadow: none; }
}

/* Editor preview of an untouched resume: explains the blank page; never printed */
.empty-hint { background: rgb(255 255 255 / 0.92); border-radius: 12px; box-shadow: 0 8px 30px rgb(0 0 0 / 0.12); left: 50%; max-width: 80%; padding: 36px 40px; position: fixed; text-align: center; top: 40%; transform: translate(-50%, -50%); }
.empty-hint strong { color: #111; display: block; font-size: 38px; margin-bottom: 12px; }
.empty-hint p { color: #4b5563; font-size: 30px; line-height: 1.4; }
@media print { .empty-hint { display: none; } }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Header */
.head { align-items: center; display: flex; gap: var(--s15); justify-content: space-between; }
.name { color: var(--primary); font-size: var(--f24); font-weight: 700; line-height: 1.15; margin-bottom: var(--s5); }
.role { color: #4b5563; font-size: var(--f14); }
.photo { border: 2pt solid var(--primary); border-radius: 50%; display: block; flex: none; height: 70pt; object-fit: cover; width: 70pt; }

.contact {
  background: #f3f4f6;
  border-radius: 5pt;
  margin-top: var(--s10);
  padding: var(--s10);
}
/* Every item draws a divider before it; the row is shifted left by one divider
   inside a clipping box, so the divider that starts each wrapped row is hidden. */
.contact-items { overflow: hidden; }
.contact-row {
  --divider: calc(1px + var(--s10));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: calc(-1 * var(--divider));
  row-gap: var(--s4);
}
.contact-item { align-items: center; display: flex; }
.contact-item::before { background: #d1d5db; content: ""; flex: none; height: 15pt; margin-right: var(--s10); width: 1px; }
.contact-label { color: var(--primary); font-size: var(--f9); font-weight: 600; margin-right: var(--s5); }
.contact-value { font-size: var(--f9); overflow-wrap: anywhere; }

.rule { border: 0; border-top: 1px solid #e2e8f0; margin: var(--s10) 0; }

/* Columns */
.cols { display: grid; flex: 1; grid-template-columns: 65% 35%; }
.main { min-width: 0; padding-right: var(--s15); }
.side { border-left: 1px solid #e5e7eb; min-width: 0; padding-left: var(--s15); }

/* Sections */
.sec { margin-bottom: var(--s20); }
.sec-head { align-items: center; break-after: avoid; display: flex; margin-bottom: var(--s10); }
.sec-title { color: var(--titles); font-size: var(--f16); font-weight: 600; margin-right: var(--s10); }
.sec-line { background: #e5e7eb; flex: 1; height: 1px; }
.sec--side .sec-head { border-bottom: 1px solid #e5e7eb; margin-bottom: var(--s8); padding-bottom: var(--s5); }
.sec--side .sec-title { font-size: var(--f14); }
.sec--side .sec-line { display: none; }

/* Items */
.item { break-inside: avoid; }
.row { align-items: baseline; display: flex; gap: var(--s8); justify-content: space-between; }
.row > :last-child:not(:first-child) { text-align: right; }

.item--work_experience { margin-bottom: var(--s12); }
.item--education { margin-bottom: var(--s10); }
.t-title { color: #111827; font-size: var(--f12); font-weight: 600; }
.t-sub { color: var(--subtitles); font-size: var(--f11); font-weight: 600; }
.t-meta { color: #111827; font-size: var(--f9); }
.t-date { color: #6b7280; display: block; font-size: var(--f9); margin-bottom: var(--s4); }
.row .t-date { margin-bottom: 0; }
.t-desc { font-size: var(--f9); line-height: 1.5; text-align: justify; white-space: pre-line; }
.t-link { color: var(--primary); display: block; font-size: var(--f8); overflow-wrap: anywhere; }
.t-name { font-size: var(--f9); }
.t-level { color: var(--primary); font-size: var(--f9); }
.summary { white-space: pre-line; }

.badges { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); }
.row .badges { justify-content: flex-end; margin-top: 0; max-width: 50%; }
.badge {
  background: color-mix(in srgb, var(--badge) 20%, transparent);
  border-radius: 4pt;
  color: var(--badge);
  display: inline-block;
  font-size: var(--f8);
  font-weight: 600;
  padding: var(--s2) var(--s6);
}

.certs { font-size: var(--f8); margin-top: var(--s4); }
.certs li + li { margin-top: var(--s2); }

.items--projects { display: grid; gap: var(--s8); }
.card { background: #f9fafb; border-left: 2pt solid var(--primary); border-radius: 4pt; padding: var(--s6); }
.card .t-title, .card .t-meta { color: #111827; font-size: var(--f10); font-weight: 600; }
.card .t-desc { font-size: var(--f8); line-height: 1.4; }

.items--skills { display: grid; gap: var(--s6); }
.bar { background: #e5e7eb; border-radius: 2pt; height: 4pt; margin-top: var(--s2); overflow: hidden; }
.bar-fill { background: var(--skill); height: 100%; }
.dots { display: flex; gap: 2pt; }
.dot { background: var(--skill); border-radius: 50%; height: 6pt; width: 6pt; }
.dot--off { background: color-mix(in srgb, var(--skill) 22%, #fff); }

.items--languages { display: grid; gap: var(--s5); }

/* ───────────── Elegant ───────────── */
.tpl-elegant .head { flex-direction: column; gap: 0; margin-bottom: var(--s8); text-align: center; }
.tpl-elegant .photo { height: 80pt; margin-bottom: var(--s6); width: 80pt; }
.tpl-elegant .name { font-size: var(--f26); margin-bottom: 0; }
.tpl-elegant .role { font-size: var(--f12); margin-bottom: var(--s6); }
.tpl-elegant .contact { background: none; margin: 0; padding: 0; }
.tpl-elegant .contact-row { column-gap: var(--s8); justify-content: center; margin-left: 0; }
.tpl-elegant .contact-item::before { display: none; }
.tpl-elegant .contact-label, .tpl-elegant .contact-value { font-size: var(--f8); }
.tpl-elegant .rule { border-color: #e0e0e0; margin: var(--s12) 0; }
.tpl-elegant .sec--summary .summary { border: 1px solid #e0e0e0; border-radius: 4pt; margin: var(--s4); padding: var(--s6); }
.tpl-elegant .cols { margin-top: var(--s8); }
.tpl-elegant .sec { margin-bottom: var(--s18); }
.tpl-elegant .sec-head { margin-bottom: var(--s6); }
.tpl-elegant .sec-title { border-bottom: 2pt solid var(--primary); font-size: var(--f14); font-weight: 700; letter-spacing: 1pt; padding-bottom: 2pt; text-transform: uppercase; }
.tpl-elegant .sec-line { display: none; }
.tpl-elegant .sec--side .sec-title { border: 0; font-size: var(--f11); font-weight: 600; letter-spacing: 0; padding: 0; text-transform: none; }
.tpl-elegant .item--work_experience,
.tpl-elegant .item--education { border-left: 3pt solid var(--primary); margin-bottom: var(--s14); padding-left: var(--s6); }
.tpl-elegant .item--work_experience .t-sub { font-size: var(--f10); font-weight: 700; }
.tpl-elegant .t-date { font-size: var(--f8); }
.tpl-elegant .t-desc { line-height: 1.4; margin: var(--s2) 0; }
.tpl-elegant .item--education .t-title { font-size: var(--f10); }
.tpl-elegant .item--education .t-desc { font-size: var(--f8); }
.tpl-elegant .card { background: color-mix(in srgb, var(--primary) 6%, #fff); border: 0; }
.tpl-elegant .card .t-link { text-decoration: underline; }
.tpl-elegant .items--skills { display: flex; flex-wrap: wrap; gap: var(--s4); }
.tpl-elegant .chip {
  background: color-mix(in srgb, var(--skill) 12%, transparent);
  border-radius: 4pt;
  color: var(--skill);
  display: inline-block;
  font-size: var(--f8);
  font-weight: 600;
  padding: var(--s2) var(--s6);
}
.tpl-elegant .item--language .t-name { font-size: var(--f10); }

/* ───────────── Creative ───────────── */
.tpl-creative { padding: 0; }
.tpl-creative .head { background: var(--primary); color: #fff; display: block; padding: var(--s10); }
.tpl-creative .head-top { align-items: center; display: flex; }
.tpl-creative .photo { background: #fff; border: 0; height: 85pt; width: 85pt; }
.tpl-creative .head-name { margin-left: var(--s15); }
.tpl-creative .name { color: #fff; font-size: var(--f22); }
.tpl-creative .role { color: color-mix(in srgb, var(--subtitles) 15%, #fff); font-size: var(--f12); font-weight: 500; }
.tpl-creative .contact { background: none; border-radius: 0; border-top: 1px solid color-mix(in srgb, var(--primary) 70%, #fff); padding: var(--s10) 0 0; }
.tpl-creative .contact-row { justify-content: flex-start; margin-left: 0; }
.tpl-creative .contact-item { align-items: flex-start; flex-direction: column; width: 32%; }
.tpl-creative .contact-item::before { display: none; }
.tpl-creative .contact-label { color: color-mix(in srgb, var(--primary) 15%, #fff); font-size: var(--f8); font-weight: 400; margin: 0; }
.tpl-creative .contact-value { color: #fff; }
.tpl-creative .cols { background: linear-gradient(to right, transparent 65%, color-mix(in srgb, var(--primary) 5%, #fff) 65%); }
.tpl-creative .main { padding: var(--s20) var(--s20) var(--s30); }
.tpl-creative .side { border: 0; padding: var(--s20) var(--s15) var(--s30); }
.tpl-creative .sec-title { color: color-mix(in srgb, var(--titles) 85%, #000); font-size: var(--f14); font-weight: 700; }
.tpl-creative .sec-line { display: none; }
.tpl-creative .sec--work_experiences .sec-head,
.tpl-creative .sec--educations .sec-head { border-bottom: 2pt solid var(--primary); padding-bottom: var(--s4); }
.tpl-creative .sec--side { margin-bottom: var(--s25); }
.tpl-creative .sec--side .sec-head { border: 0; padding: 0; }
.tpl-creative .item .t-title { color: var(--subtitles); font-size: var(--f11); font-weight: 500; }
.tpl-creative .item .t-sub { color: #333; font-size: var(--f12); font-weight: 700; }
.tpl-creative .t-date { color: #666; }
.tpl-creative .t-desc { color: #444; font-size: var(--f10); line-height: 1.6; }
.tpl-creative .item--education .t-desc { font-size: var(--f9); line-height: 1.5; }
.tpl-creative .card { background: #fff; border-left-width: 3pt; border-radius: 5pt; padding: var(--s8); }
.tpl-creative .card .t-title { color: #333; font-size: var(--f11); font-weight: 700; }
.tpl-creative .card .t-desc { font-size: var(--f9); }
.tpl-creative .item--skill .t-name { color: #333; font-size: var(--f10); }
.tpl-creative .bar { background: color-mix(in srgb, var(--skill) 30%, #fff); }
.tpl-creative .items--languages { gap: 0; }
.tpl-creative .item--language { border-bottom: 1px solid color-mix(in srgb, var(--primary) 20%, #fff); padding: var(--s6) 0; }
.tpl-creative .item--language .t-name { font-size: var(--f10); }
.tpl-creative .t-level { font-weight: 500; }

/* ───────────── Professional ───────────── */
.tpl-professional { padding: 0; }
.tpl-professional .head { background: #f8fafc; border-bottom: 3pt solid var(--primary); display: block; padding: var(--s20); }
.tpl-professional .head-top { align-items: center; display: flex; justify-content: space-between; }
.tpl-professional .name { margin-bottom: var(--s4); }
.tpl-professional .role { color: #64748b; font-weight: 500; }
.tpl-professional .contact { background: none; margin-top: var(--s10); padding: 0; }
.tpl-professional .contact-row { margin-left: 0; }
.tpl-professional .contact-item { align-items: flex-start; flex-direction: column; min-width: 30%; }
.tpl-professional .contact-item::before { display: none; }
.tpl-professional .contact-label { font-weight: 700; margin: 0; text-transform: uppercase; }
.tpl-professional .contact-value { color: #334155; font-size: var(--f10); }
.tpl-professional .cols { background: linear-gradient(to right, transparent 65%, #f8fafc 65%); }
.tpl-professional .main { padding: var(--s20) var(--s15) var(--s20) var(--s20); }
.tpl-professional .side { border: 0; padding: var(--s20) var(--s20) var(--s20) var(--s15); }
.tpl-professional .sec-head { display: block; margin-bottom: var(--s12); }
.tpl-professional .sec-title { font-size: var(--f14); font-weight: 700; margin: 0 0 var(--s4); text-transform: uppercase; }
.tpl-professional .sec-line { background: color-mix(in srgb, var(--primary) 25%, #fff); height: 2pt; }
.tpl-professional .sec--side .sec-head { border: 0; padding: 0; }
.tpl-professional .item .t-title { color: #0f172a; font-size: var(--f12); font-weight: 700; }
.tpl-professional .item .t-sub { font-weight: 500; }
.tpl-professional .t-date { color: #64748b; font-size: var(--f10); }
.tpl-professional .t-desc { color: #334155; font-size: var(--f10); }
.tpl-professional .items--projects { gap: var(--s10); }
.tpl-professional .item--project { border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, #fff); padding-bottom: var(--s10); }
.tpl-professional .item--project .t-title { font-size: var(--f11); }
.tpl-professional .item--project .t-link, .tpl-professional .item--project .t-desc { font-size: var(--f9); }
.tpl-professional .item--skill .t-name, .tpl-professional .item--language .t-name { font-size: var(--f10); font-weight: 500; }
.tpl-professional .item--language .t-level { font-size: var(--f10); }
.tpl-professional .dot { margin: 0 1pt; }

/* ───────────── Technical ───────────── */
.tpl-technical { color: #1f2937; padding: var(--s30) var(--s35); }
.tpl-technical .head { align-items: flex-start; }
.tpl-technical .name { font-size: var(--f22); margin-bottom: 0; text-transform: uppercase; }
.tpl-technical .role { color: #374151; font-size: var(--f13); font-weight: 500; }
.tpl-technical .contact { background: none; margin-top: var(--s6); padding: 0; }
.tpl-technical .contact-row { --divider: calc(1px + 2 * var(--s5)); justify-content: flex-start; }
.tpl-technical .contact-item::before { height: 10pt; margin: 0 var(--s5); }
.tpl-technical .contact-value { color: #374151; }
.tpl-technical .photo { border-radius: 4pt; height: 65pt; width: 65pt; }
.tpl-technical .rule { border-color: #e5e7eb; margin: var(--s6) 0; }
.tpl-technical .side { background: #f9fafb; border-radius: 4pt; padding-right: var(--s4); }
.tpl-technical .sec { margin-bottom: var(--s15); }
.tpl-technical .sec-head { margin-bottom: var(--s16); }
.tpl-technical .sec-title { font-size: var(--f14); text-transform: uppercase; }
.tpl-technical .sec-line { background: #d1d5db; }
.tpl-technical .sec--side .sec-head { border-bottom-color: var(--primary); margin-bottom: var(--s8); padding-bottom: var(--s3); }
.tpl-technical .sec--side .sec-title { font-size: var(--f12); }
.tpl-technical .item--work_experience { border-bottom: 1px dashed #e5e7eb; padding-bottom: var(--s8); }
.tpl-technical .item .t-title { font-size: var(--f11); font-weight: 700; }
.tpl-technical .item .t-sub { font-size: var(--f10); }
.tpl-technical .t-meta { color: #4b5563; }
.tpl-technical .end { text-align: right; }
.tpl-technical .t-date { color: #4b5563; font-size: var(--f7); }
.tpl-technical .item--education .t-meta { font-size: var(--f7); }
.tpl-technical .t-desc { color: #374151; }
.tpl-technical .badge { background: #e5e7eb; border: 1px solid var(--badge); border-radius: 3pt; font-weight: 500; padding: var(--s2) var(--s5); }
.tpl-technical .card { background: #fff; border-bottom: 1px solid #e5e7eb; border-radius: 0; padding: var(--s8); }
.tpl-technical .card .t-title { color: var(--primary); font-size: var(--f10); font-weight: 700; }
.tpl-technical .card .badge { margin-top: var(--s2); }
.tpl-technical .card .t-link { text-decoration: underline; }
.tpl-technical .item--skill .t-name, .tpl-technical .item--language .t-name { font-weight: 600; }
.tpl-technical .bar { height: 5pt; }
.tpl-technical .t-level { font-weight: 500; }

/* ───────────── Minimalist ───────────── */
.tpl-minimalist { font-size: var(--f11); padding: var(--s20); }
.tpl-minimalist .head { justify-content: flex-start; }
.tpl-minimalist .photo { border: 0; height: 60pt; width: 60pt; }
.tpl-minimalist .name { font-size: var(--f22); margin-bottom: 0; }
.tpl-minimalist .role { color: #718096; font-size: var(--f12); }
.tpl-minimalist .contact { background: none; margin: 0; padding: 0; }
.tpl-minimalist .contact-row { justify-content: space-around; margin-left: 0; }
.tpl-minimalist .contact-item { flex-direction: column; text-align: center; }
.tpl-minimalist .contact-item::before { display: none; }
.tpl-minimalist .contact-label { font-weight: 400; margin: 0; }
.tpl-minimalist .contact-value { font-size: var(--f10); }
.tpl-minimalist .cols { margin-top: var(--s10); }
.tpl-minimalist .side { background: #f7fafc; border-left-color: #e2e8f0; padding: var(--s8) var(--s8) 0 var(--s10); }
.tpl-minimalist .sec { margin-bottom: var(--s14); }
.tpl-minimalist .sec-head,
.tpl-minimalist .sec--side .sec-head { border-bottom: 1px solid #e2e8f0; margin-bottom: var(--s8); padding-bottom: var(--s4); }
.tpl-minimalist .sec-title,
.tpl-minimalist .sec--side .sec-title { font-size: var(--f14); font-weight: 500; }
.tpl-minimalist .sec-line { display: none; }
.tpl-minimalist .item--work_experience, .tpl-minimalist .item--education { display: flex; }
.tpl-minimalist .gutter { flex: none; text-align: center; width: 20%; }
.tpl-minimalist .body { min-width: 0; width: 80%; }
.tpl-minimalist .t-date--stacked { color: #718096; display: flex; flex-direction: column; font-size: var(--f9); }
.tpl-minimalist .t-duration { font-size: var(--f8); margin-top: var(--s2); }
.tpl-minimalist .item .t-title { color: #333; font-size: var(--f11); font-weight: 500; }
.tpl-minimalist .item .t-sub { font-size: var(--f10); font-weight: 400; }
.tpl-minimalist .t-desc { line-height: 1.4; }
.tpl-minimalist .card { background: #edf2f7; border: 0; border-radius: 3pt; padding: var(--s5); }
.tpl-minimalist .card .t-title { font-size: var(--f10); font-weight: 500; }
.tpl-minimalist .item--skill .t-name, .tpl-minimalist .item--language .t-name { font-size: var(--f10); }
.tpl-minimalist .dots { margin-top: var(--s2); }

/* ───────────── ATS ─────────────
   One column, black text on white and plain section rules: nothing a parser
   could read out of order or skip. */
.tpl-ats { color: #111; font-size: var(--f10); padding: var(--s25) var(--s35); }
.tpl-ats .name { color: #111; font-size: var(--f22); margin-bottom: var(--s2); }
.tpl-ats .role { color: #333; font-size: var(--f12); }
.tpl-ats .contact { background: none; border-radius: 0; font-size: var(--f9); margin: var(--s6) 0 var(--s14); padding: 0; }
.tpl-ats .sec { margin-bottom: var(--s14); }
.tpl-ats .sec-head { border-bottom: 1px solid #111; margin-bottom: var(--s8); padding-bottom: var(--s2); }
.tpl-ats .sec-title { color: #111; font-size: var(--f12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tpl-ats .sec-line { display: none; }
.tpl-ats .item--work_experience, .tpl-ats .item--education, .tpl-ats .item--project { margin-bottom: var(--s10); }
.tpl-ats .t-title { color: #111; font-size: var(--f11); font-weight: 700; }
.tpl-ats .t-sub { color: #333; font-size: var(--f10); font-weight: 600; }
.tpl-ats .t-date { color: #333; white-space: nowrap; }
.tpl-ats .t-meta, .tpl-ats .t-link { color: #333; }
.tpl-ats .t-desc { font-size: var(--f10); margin-top: var(--s2); text-align: left; }
.tpl-ats .t-name { font-size: var(--f10); }
.tpl-ats .tags { margin-top: var(--s2); }
.tpl-ats .items--skills, .tpl-ats .items--languages { gap: var(--s2); }
.tpl-ats .items--projects { display: block; }