/* ==========================================================================
   CV templates — everything that ends up on the printed A4 page.

   Sizing convention
   -----------------
   Every length inside a template is expressed as calc(var(--f) * N), where
       --f: calc(var(--fit) * 1pt)
   `--fit` is written onto .cv by the auto-fit routine in app.js. Because the
   unit is shared rather than inherited, nested elements never compound their
   scale, so shrinking --fit scales the whole CV linearly and predictably.
   ========================================================================== */

.cv{
  --fit: 1;
  --f: calc(var(--fit) * 1pt);
  width:210mm; height:297mm; overflow:hidden;
  position:relative; background:#fff; color:#14181d;
  font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size:calc(var(--f) * 10);
  line-height:1.4;
  /* Sidebar/pill backgrounds must survive printing even when the browser's
     "Background graphics" print option is left unchecked. Inherited by
     every descendant, so this alone covers the whole template. */
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}
/* While auto-fit is probing, release the fixed page height so the CV reports
   its natural content height. Applied and removed synchronously in app.js,
   so it is never visible to the user. */
.cv.measuring{ height:auto; overflow:visible; }
.cv.measuring .cv-inner{ min-height:0; }

.cv *{ box-sizing:border-box; }
.cv p{ margin:0; }
.cv ul{ margin:0; padding:0; list-style:none; }
.cv table{ border-collapse:collapse; width:100%; }
.cv-inner{ display:flex; align-items:stretch; min-height:297mm; }

/* Shared bits ------------------------------------------------------------- */
.cv-photo{ display:block; width:100%; height:100%; background-size:cover; background-repeat:no-repeat; transform-origin:center center; }
.cv-photo-empty{
  width:100%; height:100%; display:grid; place-items:center;
  background:#dfe3e9; color:#8a93a0; font-size:calc(var(--f) * 8); letter-spacing:.5px;
}
.cv-sign{ display:flex; gap:calc(var(--f) * 24); }
.cv-sign > div{ flex:1; text-align:center; }
.cv-sign .line{ border-bottom:1px dotted #4a4a4a; height:calc(var(--f) * 14); }
.cv-sign .lbl{ font-size:calc(var(--f) * 9); padding-top:calc(var(--f) * 3); }

/* Free-tier attribution mark. Appended as a plain child of #cv by render()
   in js/app.js — only while window.CV_WATERMARK is set (free.php, and only
   before that CV is paid for), never on a signed-in account's CV. A small
   translucent pill rather than plain text, so it stays legible over every
   template regardless of background colour — the Reference template's dark
   sidebar sits exactly at this corner. */
.cv-watermark{
  position:absolute; left:calc(var(--f) * 8); bottom:calc(var(--f) * 6);
  font-size:calc(var(--f) * 6); line-height:1; font-weight:600; letter-spacing:.2px;
  color:#333; background:rgba(255,255,255,.62);
  padding:calc(var(--f) * 2) calc(var(--f) * 5); border-radius:calc(var(--f) * 3);
  white-space:nowrap; pointer-events:none; user-select:none; z-index:5;
}
.cv-sign .val{ font-size:calc(var(--f) * 9.5); line-height:calc(var(--f) * 14); }
.wrap{ overflow-wrap:anywhere; word-break:break-word; }

/* Long bullet lists in a full-width column flow into two columns instead of
   forcing the whole page to shrink. Applied by the renderer past a threshold. */
.cols2{ column-count:2; column-gap:calc(var(--f) * 22); }
.cols2 li{ break-inside:avoid; -webkit-column-break-inside:avoid; }


/* ==========================================================================
   TEMPLATE 3 — reference layout: charcoal sidebar + navy banner
   ========================================================================== */
.t3{ --navy:#1B3A6B; --ink:#262626; }
.t3 .cv-inner{ min-height:297mm; }

.t3-side{
  width:35%; flex:none; background:var(--ink); color:#f2f4f7;
  padding:calc(var(--f) * 18) calc(var(--f) * 14) calc(var(--f) * 20);
}
.t3-photo{
  width:calc(var(--f) * 96 * var(--pscale, 1)); height:calc(var(--f) * 96 * var(--pscale, 1));
  margin:0 auto calc(var(--f) * 18); border-radius:50%; overflow:hidden;
  border:calc(var(--f) * 2.5) solid #fff; background:#4a4a4a;
}
.t3-pill{
  display:block; text-align:center; background:var(--navy);
  border:calc(var(--f) * 1) solid #4d76b8; border-radius:calc(var(--f) * 20);
  padding:calc(var(--f) * 4.5) calc(var(--f) * 8);
  font-size:calc(var(--f) * 10); font-weight:700; letter-spacing:.4px; color:#fff;
  margin:0 0 calc(var(--f) * 9);
}
.t3-pill svg{ width:calc(var(--f) * 10); height:calc(var(--f) * 10); vertical-align:-12%; margin-right:calc(var(--f) * 4); fill:currentColor; }
.t3-sec{ margin-bottom:calc(var(--f) * 16); }
.t3-sec:last-child{ margin-bottom:0; }
.t3-obj{ font-size:calc(var(--f) * 9); line-height:1.5; text-align:justify; color:#dfe4ea; }

.t3-contact li{
  display:flex; gap:calc(var(--f) * 7); align-items:flex-start;
  font-size:calc(var(--f) * 9); line-height:1.45; margin-bottom:calc(var(--f) * 7);
}
.t3-contact svg{ width:calc(var(--f) * 10); height:calc(var(--f) * 10); flex:none; margin-top:calc(var(--f) * 2); fill:#9fb6dd; }

.t3-list li{
  position:relative; padding-left:calc(var(--f) * 11);
  font-size:calc(var(--f) * 9.2); line-height:1.45; margin-bottom:calc(var(--f) * 5); color:#e8ebf0;
}
.t3-list li::before{
  content:""; position:absolute; left:calc(var(--f) * 1); top:calc(var(--f) * 4.6);
  width:calc(var(--f) * 4); height:calc(var(--f) * 4); border-radius:50%; background:#9fb6dd;
}

.t3-ref li{ font-size:calc(var(--f) * 9); line-height:1.4; margin-bottom:calc(var(--f) * 9); }
.t3-ref li:last-child{ margin-bottom:0; }
.t3-ref .nm{ font-weight:700; color:#fff; }
.t3-ref .ds,
.t3-ref .ad,
.t3-ref .ph{ color:#c3cddc; }

.t3-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.t3-banner{
  background:var(--navy); color:#fff; text-align:center;
  padding:calc(var(--f) * 16) calc(var(--f) * 14);
}
.t3-banner .n1{
  display:block; font-weight:800; letter-spacing:calc(var(--f) * 1.2);
  line-height:1.06; text-transform:uppercase; font-size:calc(var(--f) * 25);
}
.t3-body{ flex:1; padding:calc(var(--f) * 14) calc(var(--f) * 18) calc(var(--f) * 16); display:flex; flex-direction:column; }

.t3-h{
  text-align:center; color:var(--navy); font-weight:700;
  font-size:calc(var(--f) * 12.5); letter-spacing:.3px;
  padding-bottom:calc(var(--f) * 4); margin:0 0 calc(var(--f) * 9);
  border-bottom:calc(var(--f) * 1.2) solid var(--navy);
}
.t3-h + .t3-h{ margin-top:calc(var(--f) * 12); }
.t3-block{ margin-bottom:calc(var(--f) * 13); }
.t3-block:last-child{ margin-bottom:0; }

.t3-pd td{ padding:calc(var(--f) * 2.6) 0; font-size:calc(var(--f) * 9.6); vertical-align:top; }
.t3-pd .k{ width:38%; white-space:nowrap; }
.t3-pd .c{ width:calc(var(--f) * 10); }

.t3-edu{ display:flex; gap:calc(var(--f) * 16); }
.t3-edu > div{ flex:1; min-width:0; }
.t3-edu-t{ font-size:calc(var(--f) * 9.8); font-weight:700; line-height:1.35; margin-bottom:calc(var(--f) * 2); }
.t3-edu-i{ font-size:calc(var(--f) * 9); color:#3c4149; margin-bottom:calc(var(--f) * 6); }
.t3-tbl th{
  text-align:left; font-size:calc(var(--f) * 9); font-weight:700; color:var(--navy);
  border-bottom:calc(var(--f) * 1) solid #b9c6da; padding:calc(var(--f) * 3) calc(var(--f) * 4);
}
.t3-tbl td{
  font-size:calc(var(--f) * 9); padding:calc(var(--f) * 2.6) calc(var(--f) * 4);
  border-bottom:calc(var(--f) * .5) solid #e4e8ee; vertical-align:top;
}
.t3-tbl td:last-child, .t3-tbl th:last-child{ width:30%; }

.t3-exp-list > div{ margin-bottom:calc(var(--f) * 9); }
.t3-exp-list > div:last-child{ margin-bottom:0; }
.t3-exp-head{ display:flex; justify-content:space-between; align-items:baseline; gap:calc(var(--f) * 8); }
.t3-exp-head .role{ font-size:calc(var(--f) * 9.8); font-weight:700; color:#1c2128; }
.t3-exp-head .dur{ flex:none; font-size:calc(var(--f) * 8.6); color:#5a6472; }
.t3-exp-co{ font-size:calc(var(--f) * 9); font-style:italic; color:#3c4149; margin:calc(var(--f) * 1) 0 calc(var(--f) * 3); }
.t3-exp-desc{ font-size:calc(var(--f) * 9); line-height:1.45; color:#333; text-align:justify; }

.t3-decl{ margin-top:auto; padding-top:calc(var(--f) * 14); font-size:calc(var(--f) * 9.2); line-height:1.5; text-align:justify; }
.t3 .cv-sign{ margin-top:calc(var(--f) * 20); }


/* ==========================================================================
   TEMPLATE 1 — classic: centred header, ruled section headings, one column
   ========================================================================== */
.t1{
  --rule:#1f3a5f;
  font-family:Georgia, "Times New Roman", Cambria, serif;
  padding:calc(var(--f) * 34) calc(var(--f) * 40);
  display:flex; flex-direction:column;
}
.t1-head{ display:flex; align-items:flex-start; gap:calc(var(--f) * 18); }
.t1-head-txt{ flex:1; min-width:0; text-align:center; }
.t1-name{
  font-size:calc(var(--f) * 24); font-weight:700; letter-spacing:calc(var(--f) * 2);
  text-transform:uppercase; line-height:1.14; margin-bottom:calc(var(--f) * 5);
}
.t1-sub{ font-size:calc(var(--f) * 9.6); color:#3a424c; letter-spacing:.3px; }
.t1-sub span + span::before{ content:"•"; margin:0 calc(var(--f) * 6); color:#98a1ac; }
.t1-photo{
  width:calc(var(--f) * 74 * var(--pscale, 1)); height:calc(var(--f) * 92 * var(--pscale, 1)); flex:none;
  border:calc(var(--f) * 1) solid #b8bfc9; overflow:hidden; background:#eef1f4;
}
.t1-rules{ margin:calc(var(--f) * 12) 0 calc(var(--f) * 4); border-top:calc(var(--f) * 2) solid var(--rule); }
.t1-rules::after{ content:""; display:block; margin-top:calc(var(--f) * 2.5); border-top:calc(var(--f) * .8) solid var(--rule); }

.t1-h{
  font-size:calc(var(--f) * 11.5); font-weight:700; text-transform:uppercase;
  letter-spacing:calc(var(--f) * 1.4); color:var(--rule);
  margin:calc(var(--f) * 14) 0 calc(var(--f) * 7);
  padding-bottom:calc(var(--f) * 3); border-bottom:calc(var(--f) * .8) solid #c6ced9;
}
.t1-p{ font-size:calc(var(--f) * 9.8); line-height:1.55; text-align:justify; }

.t1-pd{ display:grid; grid-template-columns:1fr 1fr; gap:0 calc(var(--f) * 22); }
.t1-pd .row{ display:flex; font-size:calc(var(--f) * 9.8); padding:calc(var(--f) * 2.4) 0; }
.t1-pd .k{ width:44%; flex:none; font-weight:700; color:#2b323b; }
.t1-pd .k::after{ content:":"; float:right; padding-right:calc(var(--f) * 6); }

.t1-two{ display:flex; gap:calc(var(--f) * 26); }
.t1-two > div{ flex:1; min-width:0; }
.t1-sh{ font-size:calc(var(--f) * 9.8); font-weight:700; margin-bottom:calc(var(--f) * 5); }
.t1-tbl th{
  text-align:left; font-size:calc(var(--f) * 9); font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; padding:calc(var(--f) * 3.5) calc(var(--f) * 5);
  background:#eef1f5; border:calc(var(--f) * .8) solid #c6ced9;
}
.t1-tbl td{
  font-size:calc(var(--f) * 9.4); padding:calc(var(--f) * 2.8) calc(var(--f) * 5);
  border:calc(var(--f) * .8) solid #d8dee6; vertical-align:top;
}
.t1-tbl td:last-child, .t1-tbl th:last-child{ width:32%; }

.t1-inline{ font-size:calc(var(--f) * 9.8); margin-bottom:calc(var(--f) * 6); }
.t1-inline span + span::before{ content:"•"; margin:0 calc(var(--f) * 6); color:#98a1ac; }
.t1-ul li{
  position:relative; padding-left:calc(var(--f) * 12); font-size:calc(var(--f) * 9.8);
  line-height:1.5; margin-bottom:calc(var(--f) * 4);
}
.t1-ul li::before{
  content:""; position:absolute; left:calc(var(--f) * 2); top:calc(var(--f) * 5.4);
  width:calc(var(--f) * 4); height:calc(var(--f) * 4); background:var(--rule); border-radius:50%;
}

.t1-ref{ display:flex; flex-wrap:wrap; gap:calc(var(--f) * 8) calc(var(--f) * 26); }
.t1-ref-item{ flex:1 1 45%; min-width:0; font-size:calc(var(--f) * 9.6); line-height:1.5; }
.t1-ref-item .nm{ font-weight:700; color:#1c2128; }
.t1-ref-item .ds{ font-style:italic; color:#3c4149; }
.t1-exp{ margin-bottom:calc(var(--f) * 10); }
.t1-exp:last-child{ margin-bottom:0; }
.t1-exp-head{ display:flex; justify-content:space-between; align-items:baseline; gap:calc(var(--f) * 10); }
.t1-exp-head .role{ font-size:calc(var(--f) * 9.8); font-weight:700; }
.t1-exp-head .dur{ flex:none; font-size:calc(var(--f) * 9); font-style:italic; color:#5a626d; }
.t1-exp-co{ font-size:calc(var(--f) * 9.4); font-style:italic; color:#3a424c; margin:calc(var(--f) * 1) 0 calc(var(--f) * 3); }
.t1-decl{ margin-top:auto; padding-top:calc(var(--f) * 16); }
.t1 .cv-sign{ margin-top:calc(var(--f) * 22); }


/* ==========================================================================
   TEMPLATE 2 — modern: soft grey sidebar, teal accents
   ========================================================================== */
.t2{ --acc:#0F766E; --acc-dk:#134E4A; }
.t2 .cv-inner{ min-height:297mm; }

.t2-side{
  width:33%; flex:none; background:#EEF2F5; color:#22303c;
  padding:calc(var(--f) * 26) calc(var(--f) * 16) calc(var(--f) * 22);
}
.t2-photo{
  width:calc(var(--f) * 92 * var(--pscale, 1)); height:calc(var(--f) * 92 * var(--pscale, 1));
  margin:0 auto calc(var(--f) * 20); border-radius:50%; overflow:hidden;
  border:calc(var(--f) * 3) solid var(--acc); background:#cfd8de;
}
.t2-sh{
  font-size:calc(var(--f) * 10); font-weight:800; text-transform:uppercase;
  letter-spacing:calc(var(--f) * 1.1); color:var(--acc-dk);
  margin:0 0 calc(var(--f) * 8); padding-bottom:calc(var(--f) * 4);
  border-bottom:calc(var(--f) * 1.6) solid var(--acc);
}
.t2-sec{ margin-bottom:calc(var(--f) * 18); }
.t2-sec:last-child{ margin-bottom:0; }
.t2-contact li{
  display:flex; gap:calc(var(--f) * 7); align-items:flex-start;
  font-size:calc(var(--f) * 9); line-height:1.45; margin-bottom:calc(var(--f) * 7);
}
.t2-contact svg{ width:calc(var(--f) * 10); height:calc(var(--f) * 10); flex:none; margin-top:calc(var(--f) * 2); fill:var(--acc); }
.t2-list li{
  position:relative; padding-left:calc(var(--f) * 11);
  font-size:calc(var(--f) * 9.2); line-height:1.45; margin-bottom:calc(var(--f) * 5.5);
}
.t2-list li::before{
  content:""; position:absolute; left:0; top:calc(var(--f) * 4.2);
  width:calc(var(--f) * 5); height:calc(var(--f) * 5); background:var(--acc);
}

.t2-ref li{ font-size:calc(var(--f) * 9); line-height:1.4; margin-bottom:calc(var(--f) * 9); }
.t2-ref li:last-child{ margin-bottom:0; }
.t2-ref .nm{ font-weight:700; color:var(--acc-dk); }
.t2-ref .ds,
.t2-ref .ad,
.t2-ref .ph{ color:#5c6773; }

.t2-main{ flex:1; min-width:0; padding:calc(var(--f) * 28) calc(var(--f) * 22) calc(var(--f) * 22); display:flex; flex-direction:column; }
.t2-name{ font-size:calc(var(--f) * 26); font-weight:300; line-height:1.06; color:#16212b; text-transform:uppercase; letter-spacing:calc(var(--f) * 1.5); }
.t2-name b{ font-weight:800; }
.t2-role{ font-size:calc(var(--f) * 10); color:var(--acc); letter-spacing:calc(var(--f) * 1.6); text-transform:uppercase; margin-top:calc(var(--f) * 5); }
.t2-bar{ width:calc(var(--f) * 52); height:calc(var(--f) * 3.4); background:var(--acc); margin:calc(var(--f) * 9) 0 calc(var(--f) * 14); }

.t2-h{
  display:flex; align-items:center; gap:calc(var(--f) * 7);
  font-size:calc(var(--f) * 11); font-weight:800; text-transform:uppercase;
  letter-spacing:calc(var(--f) * 1.1); color:var(--acc-dk); margin:0 0 calc(var(--f) * 8);
}
.t2-h::before{ content:""; width:calc(var(--f) * 6); height:calc(var(--f) * 6); background:var(--acc); flex:none; }
.t2-h::after{ content:""; flex:1; height:calc(var(--f) * .8); background:#d3dbe1; }
.t2-block{ margin-bottom:calc(var(--f) * 15); }
.t2-p{ font-size:calc(var(--f) * 9.6); line-height:1.55; text-align:justify; }

.t2-pd{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--f) * 3) calc(var(--f) * 18); }
.t2-pd .row{ font-size:calc(var(--f) * 9.4); line-height:1.4; }
.t2-pd .k{ display:block; font-size:calc(var(--f) * 8); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#7a8794; }

.t2-two{ display:flex; gap:calc(var(--f) * 18); }
.t2-two > div{ flex:1; min-width:0; }
.t2-et{ font-size:calc(var(--f) * 9.6); font-weight:700; color:var(--acc-dk); }
.t2-ei{ font-size:calc(var(--f) * 8.6); color:#6a7580; margin-bottom:calc(var(--f) * 6); }
.t2-tbl th{
  text-align:left; font-size:calc(var(--f) * 8.4); font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:#fff; background:var(--acc);
  padding:calc(var(--f) * 3) calc(var(--f) * 5);
}
.t2-tbl td{ font-size:calc(var(--f) * 9); padding:calc(var(--f) * 2.8) calc(var(--f) * 5); vertical-align:top; }
.t2-tbl tbody tr:nth-child(odd){ background:#F3F6F8; }
.t2-tbl td:last-child, .t2-tbl th:last-child{ width:30%; }

.t2-exp{ margin-bottom:calc(var(--f) * 11); }
.t2-exp:last-child{ margin-bottom:0; }
.t2-exp-head{ display:flex; justify-content:space-between; align-items:baseline; gap:calc(var(--f) * 10); }
.t2-exp-head .role{ font-size:calc(var(--f) * 9.8); font-weight:700; color:#16212b; }
.t2-exp-head .dur{
  flex:none; font-size:calc(var(--f) * 8.6); font-weight:700; color:var(--acc);
  text-transform:uppercase; letter-spacing:.3px;
}
.t2-exp-co{ font-size:calc(var(--f) * 9); color:#5c6773; margin:calc(var(--f) * 1) 0 calc(var(--f) * 4); }
.t2-decl{ margin-top:auto; padding-top:calc(var(--f) * 14); font-size:calc(var(--f) * 9.2); line-height:1.5; text-align:justify; }
.t2 .cv-sign{ margin-top:calc(var(--f) * 20); }


/* -------------------------------------------------------------------------
   Print: the CV is cloned into #print-root, which must sit flush at 0,0 so
   the A4 box maps exactly onto the sheet.
   ------------------------------------------------------------------------- */
@page{ size:A4; margin:0; }
@media print{
  #print-root .cv{ box-shadow:none; margin:0; }
}