/* CV generator (/tools/cv-generator/). Plain CSS, loaded only on that page.
   The CV "sheet" is paper-white in both site themes. Sizes are in pt so the screen preview
   matches the printed PDF. Design variables set by the app:
     --s  text scale   --g  spacing scale   --lh line height (optional)   --ff font (optional)   --accent
   Keep letter-spacing ≤ 0.8pt: wider tracking makes PDF text extract as "P R O F I L E",
   which breaks ATS parsing. Avoid font-variant: small-caps too ("P rofessional").
   Both were caught by scripts/test-cv-builder.mjs. */

.cvb-stage { position: relative; overflow: hidden; }
.cvb-scaler { transform-origin: top left; }
.cvb-sheet {
  --s: 1;
  --g: 1;
  --accent: #1d4ed8;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .45), 0 0 0 1px rgb(0 0 0 / .06);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cvb-sheet a { color: inherit; text-decoration: none; }
.cvb-sheet p, .cvb-sheet h1, .cvb-sheet h2, .cvb-sheet h3 { margin: 0; }
.cvb-sheet ul { list-style: disc; }
.cvb-sheet strong { font-weight: 700; }
.cvb-sheet em { font-style: italic; }
.cvb-sheet .cvb-ph { color: #9a9a9a; }
.cvb-sheet .cvb-empty { color: #8a8a8a; font-size: 11pt; margin-top: 18pt; line-height: 1.5; }
.cvb-sheet mark.cvb-hl { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
.cvb-pageline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #e11d48; pointer-events: none; }
.cvb-pageline span { position: absolute; right: 6px; top: -9px; font: 600 10px/1 ui-monospace, monospace; color: #e11d48; background: #fff; padding: 2px 4px; }
.cvb-thumb { position: relative; overflow: hidden; background: #fff; pointer-events: none; }

/* Header with optional photo */
.cvb-sheet .cv-head.has-photo { display: flex; align-items: center; gap: 12pt; }
.cvb-sheet .cv-photo { width: 62pt; height: 62pt; border-radius: 50%; object-fit: cover; flex: none; }
.cvb-sheet .cv-head-text { min-width: 0; flex: 1; }

/* Cover letter body (shared by all templates) */
.cvb-sheet .cl-body { margin-top: calc(18pt * var(--g)); }
.cvb-sheet .cl-body p { margin: 0 0 calc(9pt * var(--g)); }
.cvb-sheet .cl-to, .cvb-sheet .cl-date { margin-bottom: calc(12pt * var(--g)) !important; }
.cvb-sheet .cl-sign { margin-top: calc(20pt * var(--g)) !important; font-weight: 700; }

/* ------------------------------------------------------------ Classic (identical to /resume/ PDF) */
.t-classic { font-family: var(--ff, Arial, "Liberation Sans", Helvetica, sans-serif); font-size: calc(9.8pt * var(--s)); line-height: var(--lh, 1.38); }
.t-classic .cv-head { border-bottom: 1.5pt solid #111; padding-bottom: 6pt; }
.t-classic .cv-name { font-size: calc(21pt * var(--s)); font-weight: 700; line-height: 1.1; letter-spacing: -0.2pt; }
.t-classic .cv-role { font-size: calc(11.5pt * var(--s)); font-weight: 700; margin: 3pt 0 0; color: #333; }
.t-classic .cv-contact { margin: 4pt 0 0; font-size: calc(9pt * var(--s)); color: #333; }
.t-classic h2 { font-size: calc(10.5pt * var(--s)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8pt; margin: calc(11pt * var(--g)) 0 calc(4pt * var(--g)); padding-bottom: 2pt; border-bottom: 0.6pt solid #999; }
.t-classic h3 { font-size: calc(10.5pt * var(--s)); font-weight: 700; }
.t-classic p { margin: 0 0 3pt; }
.t-classic ul { margin: 2pt 0 0; padding-left: 13pt; }
.t-classic li { margin: 0 0 1.5pt; }
.t-classic .cv-skills { list-style: none; padding: 0; }
.t-classic .cv-item { margin: 0 0 calc(6pt * var(--g)); }
.t-classic .cv-meta { color: #444; font-size: calc(9.2pt * var(--s)); margin: 1pt 0 2pt; }
.t-classic .cv-tech { font-size: calc(9.2pt * var(--s)); color: #333; }

/* ------------------------------------------------------------ Modern (accent color, airy) */
.t-modern { font-family: var(--ff, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif); font-size: calc(9.8pt * var(--s)); line-height: var(--lh, 1.42); }
.t-modern .cv-head { padding-bottom: 4pt; }
.t-modern .cv-name { font-size: calc(25pt * var(--s)); font-weight: 700; line-height: 1.05; letter-spacing: -0.5pt; color: var(--accent); }
.t-modern .cv-role { font-size: calc(12pt * var(--s)); font-weight: 400; margin: 4pt 0 0; color: #222; }
.t-modern .cv-contact { margin: 6pt 0 0; font-size: calc(9pt * var(--s)); color: #444; }
.t-modern h2 { font-size: calc(10pt * var(--s)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8pt; color: var(--accent); margin: calc(13pt * var(--g)) 0 calc(5pt * var(--g)); padding-bottom: 2.5pt; border-bottom: 1.2pt solid var(--accent); }
.t-modern h3 { font-size: calc(10.5pt * var(--s)); font-weight: 700; color: #111; }
.t-modern p { margin: 0 0 3pt; }
.t-modern ul { margin: 2pt 0 0; padding-left: 13pt; }
.t-modern li { margin: 0 0 2pt; }
.t-modern li::marker { color: var(--accent); }
.t-modern .cv-skills { list-style: none; padding: 0; }
.t-modern .cv-item { margin: 0 0 calc(7pt * var(--g)); }
.t-modern .cv-meta { color: #555; font-size: calc(9.2pt * var(--s)); margin: 1pt 0 2pt; }
.t-modern .cv-tech { font-size: calc(9.2pt * var(--s)); color: #333; }

/* ------------------------------------------------------------ Compact (dense, fits long histories) */
.t-compact { font-family: var(--ff, Arial, "Liberation Sans", Helvetica, sans-serif); font-size: calc(9pt * var(--s)); line-height: var(--lh, 1.3); }
.t-compact .cv-head { border-bottom: 1pt solid #111; padding-bottom: 4pt; }
.t-compact .cv-name { font-size: calc(17pt * var(--s)); font-weight: 700; line-height: 1.1; }
.t-compact .cv-role { font-size: calc(10pt * var(--s)); font-weight: 700; margin: 1pt 0 0; color: #333; }
.t-compact .cv-contact { margin: 2pt 0 0; font-size: calc(8.5pt * var(--s)); color: #333; }
.t-compact h2 { font-size: calc(9.5pt * var(--s)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6pt; margin: calc(7pt * var(--g)) 0 calc(3pt * var(--g)); padding-bottom: 1pt; border-bottom: 0.5pt solid #999; }
.t-compact h3 { font-size: calc(9.5pt * var(--s)); font-weight: 700; }
.t-compact p { margin: 0 0 2pt; }
.t-compact ul { margin: 1pt 0 0; padding-left: 11pt; }
.t-compact li { margin: 0 0 0.5pt; }
.t-compact .cv-skills { list-style: none; padding: 0; }
.t-compact .cv-item { margin: 0 0 calc(4pt * var(--g)); }
.t-compact .cv-meta { color: #444; font-size: calc(8.5pt * var(--s)); margin: 0 0 1pt; }
.t-compact .cv-tech { font-size: calc(8.5pt * var(--s)); color: #333; }

/* ------------------------------------------------------------ Executive (serif, centered header) */
.t-serif { font-family: var(--ff, Georgia, "Times New Roman", "Liberation Serif", Times, serif); font-size: calc(10.2pt * var(--s)); line-height: var(--lh, 1.38); }
.t-serif .cv-head { text-align: center; border-bottom: 2.5pt double #222; padding-bottom: 7pt; }
.t-serif .cv-head.has-photo { flex-direction: column; gap: 6pt; }
.t-serif .cv-name { font-size: calc(22pt * var(--s)); font-weight: 400; letter-spacing: 0.6pt; text-transform: uppercase; line-height: 1.15; }
.t-serif .cv-role { font-size: calc(11.5pt * var(--s)); font-style: italic; margin: 3pt 0 0; color: #333; }
.t-serif .cv-contact { margin: 5pt 0 0; font-size: calc(9pt * var(--s)); color: #333; }
.t-serif h2 { font-size: calc(11pt * var(--s)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6pt; margin: calc(12pt * var(--g)) 0 calc(4pt * var(--g)); padding-bottom: 2pt; border-bottom: 0.6pt solid #777; }
.t-serif h3 { font-size: calc(10.8pt * var(--s)); font-weight: 700; }
.t-serif p { margin: 0 0 3pt; }
.t-serif ul { margin: 2pt 0 0; padding-left: 14pt; }
.t-serif li { margin: 0 0 1.5pt; }
.t-serif .cv-skills { list-style: none; padding: 0; }
.t-serif .cv-item { margin: 0 0 calc(7pt * var(--g)); }
.t-serif .cv-meta { color: #444; font-size: calc(9.4pt * var(--s)); font-style: italic; margin: 1pt 0 2pt; }
.t-serif .cv-tech { font-size: calc(9.4pt * var(--s)); color: #333; }

/* ------------------------------------------------------------ Minimal (whitespace, no rules) */
.t-minimal { font-family: var(--ff, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif); font-size: calc(9.8pt * var(--s)); line-height: var(--lh, 1.48); color: #1a1a1a; }
.t-minimal .cv-name { font-size: calc(24pt * var(--s)); font-weight: 600; line-height: 1.1; letter-spacing: -0.4pt; }
.t-minimal .cv-role { font-size: calc(11.5pt * var(--s)); margin: 3pt 0 0; color: var(--accent); }
.t-minimal .cv-contact { margin: 6pt 0 0; font-size: calc(8.8pt * var(--s)); color: #555; }
.t-minimal h2 { font-size: calc(9pt * var(--s)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8pt; color: #666; margin: calc(16pt * var(--g)) 0 calc(6pt * var(--g)); }
.t-minimal h3 { font-size: calc(10.4pt * var(--s)); font-weight: 600; }
.t-minimal p { margin: 0 0 3pt; }
.t-minimal ul { margin: 2pt 0 0; padding-left: 12pt; }
.t-minimal li { margin: 0 0 2pt; }
.t-minimal .cv-skills { list-style: none; padding: 0; }
.t-minimal .cv-item { margin: 0 0 calc(8pt * var(--g)); }
.t-minimal .cv-meta { color: #666; font-size: calc(9pt * var(--s)); margin: 1pt 0 3pt; }
.t-minimal .cv-tech { font-size: calc(9pt * var(--s)); color: #444; }

/* ------------------------------------------------------------ Elegant (serif with accent bars) */
.t-elegant { font-family: var(--ff, Georgia, "Times New Roman", "Liberation Serif", serif); font-size: calc(10pt * var(--s)); line-height: var(--lh, 1.42); }
.t-elegant .cv-head { padding-bottom: 6pt; border-bottom: 0.6pt solid #ccc; }
.t-elegant .cv-name { font-size: calc(25pt * var(--s)); font-weight: 700; line-height: 1.1; color: var(--accent); }
.t-elegant .cv-role { font-size: calc(12pt * var(--s)); font-style: italic; margin: 3pt 0 0; color: #333; }
.t-elegant .cv-contact { margin: 5pt 0 0; font-size: calc(9pt * var(--s)); color: #444; }
.t-elegant h2 { font-size: calc(11.5pt * var(--s)); font-weight: 700; color: #111; margin: calc(13pt * var(--g)) 0 calc(5pt * var(--g)); padding: 1pt 0 1pt 7pt; border-left: 3pt solid var(--accent); }
.t-elegant h3 { font-size: calc(10.6pt * var(--s)); font-weight: 700; }
.t-elegant p { margin: 0 0 3pt; }
.t-elegant ul { margin: 2pt 0 0; padding-left: 14pt; }
.t-elegant li { margin: 0 0 1.5pt; }
.t-elegant li::marker { color: var(--accent); }
.t-elegant .cv-skills { list-style: none; padding: 0; }
.t-elegant .cv-item { margin: 0 0 calc(7pt * var(--g)); }
.t-elegant .cv-meta { color: #555; font-size: calc(9.2pt * var(--s)); font-style: italic; margin: 1pt 0 2pt; }
.t-elegant .cv-tech { font-size: calc(9.2pt * var(--s)); color: #333; }

/* ------------------------------------------------------------ Banner (colored header band) */
.t-banner { font-family: var(--ff, Arial, "Liberation Sans", Helvetica, sans-serif); font-size: calc(9.8pt * var(--s)); line-height: var(--lh, 1.4); }
.t-banner .cv-head { background: var(--accent); color: #fff; padding: 14pt 16pt; border-radius: 4pt; }
.t-banner .cv-name { font-size: calc(24pt * var(--s)); font-weight: 700; line-height: 1.1; }
.t-banner .cv-role { font-size: calc(12pt * var(--s)); margin: 3pt 0 0; opacity: .95; }
.t-banner .cv-contact { margin: 6pt 0 0; font-size: calc(9pt * var(--s)); opacity: .92; }
.t-banner .cv-photo { border: 2pt solid rgb(255 255 255 / .8); }
.t-banner h2 { font-size: calc(10.5pt * var(--s)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6pt; color: var(--accent); margin: calc(13pt * var(--g)) 0 calc(5pt * var(--g)); padding-bottom: 2pt; border-bottom: 0.8pt solid #ddd; }
.t-banner h3 { font-size: calc(10.5pt * var(--s)); font-weight: 700; }
.t-banner p { margin: 0 0 3pt; }
.t-banner ul { margin: 2pt 0 0; padding-left: 13pt; }
.t-banner li { margin: 0 0 1.5pt; }
.t-banner .cv-skills { list-style: none; padding: 0; }
.t-banner .cv-item { margin: 0 0 calc(7pt * var(--g)); }
.t-banner .cv-meta { color: #555; font-size: calc(9.2pt * var(--s)); margin: 1pt 0 2pt; }
.t-banner .cv-tech { font-size: calc(9.2pt * var(--s)); color: #333; }

/* ------------------------------------------------------------ Sidebar (two columns) */
.t-sidebar { font-family: var(--ff, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif); font-size: calc(9.6pt * var(--s)); line-height: var(--lh, 1.4); }
.t-sidebar .cv-head { padding-bottom: 8pt; border-bottom: 1.2pt solid var(--accent); }
.t-sidebar .cv-name { font-size: calc(24pt * var(--s)); font-weight: 700; line-height: 1.1; color: var(--accent); }
.t-sidebar .cv-role { font-size: calc(11.5pt * var(--s)); margin: 3pt 0 0; color: #222; }
.t-sidebar .cv-contact { margin: 5pt 0 0; font-size: calc(8.8pt * var(--s)); color: #444; }
.t-sidebar .cv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 31%; gap: 14pt; }
.t-sidebar .cv-side { border-left: 0.8pt solid #ddd; padding-left: 11pt; }
.t-sidebar h2 { font-size: calc(10pt * var(--s)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6pt; color: var(--accent); margin: calc(12pt * var(--g)) 0 calc(5pt * var(--g)); }
.t-sidebar h3 { font-size: calc(10.3pt * var(--s)); font-weight: 700; }
.t-sidebar p { margin: 0 0 3pt; }
.t-sidebar ul { margin: 2pt 0 0; padding-left: 12pt; }
.t-sidebar li { margin: 0 0 2pt; }
.t-sidebar .cv-skills { list-style: none; padding: 0; }
.t-sidebar .cv-side .cv-skills li { margin-bottom: 5pt; }
.t-sidebar .cv-side .cv-skills strong { display: block; }
.t-sidebar .cv-item { margin: 0 0 calc(7pt * var(--g)); }
.t-sidebar .cv-meta { color: #555; font-size: calc(9pt * var(--s)); margin: 1pt 0 2pt; }
.t-sidebar .cv-tech { font-size: calc(9pt * var(--s)); color: #333; }

/* Keep entries and section titles together across page breaks */
.cvb-sheet .cv-item { break-inside: avoid; }
.cvb-sheet h2 { break-after: avoid; }

/* Mobile tabs: the inactive pane is collapsed, not display:none, so the preview keeps its
   layout and the page estimate stays correct while you edit. */
@media (max-width: 1023.98px) {
  .cvb-collapsed { height: 0; overflow: hidden; visibility: hidden; }
}

/* ------------------------------------------------------------ Print: only the CV sheet */
@media print {
  main > :not(.cvb-print-host), [data-cvb-ui], .cvb-pageline { display: none !important; }
  .cvb-print-host { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .cvb-grid { display: block !important; }
  .cvb-pane-preview { display: block !important; position: static !important; padding: 0 !important; border: 0 !important; background: none !important; height: auto !important; max-height: none !important; overflow: visible !important; visibility: visible !important; }
  .cvb-stage { overflow: visible !important; height: auto !important; }
  .cvb-scaler { transform: none !important; width: auto !important; height: auto !important; }
  .cvb-sheet { width: auto !important; min-height: 0 !important; padding: 0 !important; box-shadow: none !important; }
  .cvb-sheet mark.cvb-hl { background: none !important; padding: 0 !important; }
}