/* The A4 page: base styles and blocks shared by every template, the layout system, print. */
.cv{
  --hdr:#3a3d44; --side:#efe8e2; --ink:#2b2b2b; --muted:#8a8a8a; --k:1; --sk:.85; --side-w:70mm; /* --k text size, --sk vertical spacing (both tightened by the one-page fit) */
  position:relative;width:210mm;min-height:297mm;background:#fff;color:var(--ink);
  font-family:var(--font,'Open Sans'),sans-serif;font-size:calc(10pt * var(--k));line-height:1.55;
  display:flex;flex-direction:column;overflow:hidden;text-align:left;
  -webkit-print-color-adjust:exact;print-color-adjust:exact
}
.cv a{color:inherit}
.cv h1,.cv h2,.cv h3{letter-spacing:normal}
.cv h3.small{margin:0;font-size:calc(10pt * var(--k));font-weight:600}
.cv section.tight{margin-top:calc(-2mm * var(--sk))}

.cv-contacts{display:flex;flex-direction:column;gap:calc(2mm * var(--sk));font-size:calc(9.5pt * var(--k))}
.cv-contact{display:flex;gap:2.8mm;align-items:flex-start;word-break:break-word}
.cv-ico{width:5.8mm;height:5.8mm;border-radius:50%;background:var(--hdr);flex:none;display:flex;align-items:center;justify-content:center;margin-top:calc(.1mm * var(--sk))}
.cv-ico svg{width:3.5mm;height:3.5mm;fill:#fff;display:block}
.cv-contact a{text-decoration:underline}

.cv-edu{list-style:none;margin:0;padding:0}
.cv-edu li{position:relative;padding-left:6mm;margin-bottom:calc(3mm * var(--sk))}
.cv-edu li::before{content:"";position:absolute;left:.4mm;top:2.1mm;width:2.2mm;height:2.2mm;border-radius:50%;background:var(--ink)}
.cv-edu li::after{content:"";position:absolute;left:1.4mm;top:5.2mm;bottom:.5mm;width:.25mm;background:var(--ink)}
.cv-edu .dates{display:block}

.cv-langs div{margin-bottom:calc(2.6mm * var(--sk))}
/* language levels as dots or a bar (themes can recolour with --lvl, default = accent) */
.cv-lvls .lg{margin-bottom:calc(2.6mm * var(--sk))}
.cv-lvls .top{display:flex;justify-content:space-between;align-items:baseline;gap:3mm;line-height:1.35}
.cv-lvls .ln{font-weight:600}
.cv-lvls .lv{color:var(--muted);font-size:calc(8.8pt * var(--k));text-align:right}
.cv-lvl{display:flex;margin-top:calc(1.3mm * var(--sk))}
.cv-lvl.dots{gap:1.2mm}
.cv-lvl.dots i{width:2.3mm;height:2.3mm;border-radius:50%;background:var(--lvl,var(--hdr));opacity:.2}
.cv-lvl.dots i.on{opacity:1}
.cv-lvl.bar{height:1.5mm;border-radius:1mm;background:color-mix(in srgb,var(--lvl,var(--hdr)) 20%,transparent)}
.cv-lvl.bar i{display:block;height:100%;border-radius:1mm;background:var(--lvl,var(--hdr))}
.cv-band .cv-lvls .lg{margin-bottom:calc(1.4mm * var(--sk))}

.cv-rich p{margin:0 0 calc(2mm * var(--sk))}
.cv-rich p:last-child{margin-bottom:0}
.cv-rich ul,.cv-rich ol{margin:0;padding-left:0;list-style:none}
.cv-rich ol{counter-reset:n}
.cv-rich li{position:relative;padding-left:4mm}
.cv-rich ul>li::before{content:"•";position:absolute;left:0}
.cv-rich ol>li{counter-increment:n}
.cv-rich ol>li::before{content:counter(n) ".";position:absolute;left:0}
.cv-rich ul ul,.cv-rich ol ol,.cv-rich ul ol,.cv-rich ol ul{padding-left:4mm}

.cv-job{margin-bottom:calc(5mm * var(--sk))}
.cv-job:last-child{margin-bottom:0}
.cv-job .role{font-weight:600;line-height:1.35}
.cv-job .dates{color:var(--muted);font-size:calc(9pt * var(--k));line-height:1.3}
.cv-job .note{color:var(--muted);font-style:italic;margin-top:calc(.5mm * var(--sk))}

/* ---- page regions ----
   Layouts (layouts/*.js) arrange these regions; themes (templates/*.js) only style them.
   Themes tune spacing through variables: --hdr-pad, --row-pad, --gap, --side-w, --side-pad, --main-pad, --band-pad. */
.cv-header{position:relative;z-index:1;display:flex;align-items:center;gap:8mm;padding:var(--hdr-pad,calc(14mm * var(--sk)) 12mm calc(9mm * var(--sk)))}
.cv-id{flex:1;min-width:0;position:relative}
.cv-name{margin:0}
.cv-photo-wrap{flex:none;position:relative;z-index:1}
.cv-photo{width:var(--photo,31mm);height:var(--photo,31mm);border-radius:50%;background:#ddd center/cover no-repeat}
.cv-header .cv-contacts{flex-direction:row;flex-wrap:wrap;gap:1.6mm 6mm;margin-top:calc(4mm * var(--sk))}
/* contacts under the name get their own grid row, so the photo stays centred on the name block alone */
.cv.contacts-head>.cv-header{display:grid;grid-template-columns:auto 1fr;row-gap:0}
.cv.contacts-head>.cv-header>.cv-photo-wrap{grid-column:1;grid-row:1}
.cv.contacts-head>.cv-header>.cv-id,.cv.contacts-head>.cv-header>.cv-contacts{grid-column:-2}
.cv.contacts-head.no-photo>.cv-header{grid-template-columns:1fr}
.cv-row{position:relative;z-index:1;display:flex;flex:1;gap:var(--gap,0);padding:var(--row-pad,0)}
.cv-row.rev{flex-direction:row-reverse}
.cv-side{width:var(--side-w,64mm);flex:none;padding:var(--side-pad,calc(9mm * var(--sk)) 8mm calc(10mm * var(--sk)));position:relative}
.cv-main{flex:1;min-width:0;padding:var(--main-pad,calc(9mm * var(--sk)) 10mm calc(10mm * var(--sk)));position:relative}
.cv-main>.cv-header{padding:var(--hdr-pad-in,0 0 calc(7mm * var(--sk)))}
.cv-side>.cv-photo-wrap{margin:0 auto calc(9mm * var(--sk));width:max-content}
/* the info band reuses the side styling of the theme, laid out as columns */
.cv-band{position:relative;z-index:1;width:auto !important;flex:none;padding:var(--band-pad,calc(7mm * var(--sk)) 12mm calc(6mm * var(--sk)))}
.band-cols{display:block}
.cv-band .band-cols{display:flex;gap:8mm;align-items:flex-start}
.cv-band .band-cols>section{flex:1 1 0;min-width:0;margin-bottom:0 !important}
/* e-mails and links don't break nicely, so the contacts column gets a larger share of the band */
.cv-band .band-cols>section:has(.cv-contacts){flex-grow:1.4}
/* software names are short: a narrower column leaves room for the wordier ones */
.cv-band .band-cols>section:has([data-bind="labels.software"]){flex-grow:.65}
.cv-band .cv-contacts{gap:1.4mm}
.cv-band .cv-edu li{margin-bottom:calc(2mm * var(--sk))}
.cv-band .cv-langs div{margin-bottom:calc(1.2mm * var(--sk))}
.cv.lay-top .cv-band,.cv.lay-bottom .cv-band{align-self:stretch}
.cv.lay-bottom .cv-row{flex:0 0 auto}
.cv.lay-bottom.band-footer .cv-row{flex:1}
/* band layouts trade some vertical rhythm for the extra band (prefixed with .cv to win over theme spacing) */
.cv.lay-top .cv-main section,.cv.lay-bottom .cv-main section{margin-bottom:calc(5mm * var(--sk))}
.cv.lay-top .cv-band h2,.cv.lay-bottom .cv-band h2{margin-bottom:calc(2.2mm * var(--sk))}

/* ---- preview helpers ---- */
/* editor-only controls on the page (add / remove / level chips): never measured for page fit, never exported or printed */
.cv.measuring .cv-ui,.cv.exporting .cv-ui{display:none !important}
/* the CV is always one A4 page: what still doesn't fit (at the smallest text and spacing) is marked, and isn't printed */
.page-guide{position:absolute;left:0;right:0;bottom:0;border-top:2px dashed rgba(220,40,40,.75);background:repeating-linear-gradient(-45deg,rgba(220,40,40,.07) 0 8px,rgba(220,40,40,.13) 8px 16px);pointer-events:none;z-index:10}
.page-guide span{position:absolute;left:50%;transform:translateX(-50%);top:6px;white-space:nowrap;font:600 10px/1 system-ui,sans-serif;color:rgba(220,40,40,.85);background:#fff;padding:2px 4px;border-radius:3px}
.page-ruler{position:absolute;top:0;left:0;width:1px;height:297mm;visibility:hidden;pointer-events:none}
.cv.exporting{min-height:296mm}
.cv.exporting .page-guide{display:none}

/* ---- print = vector PDF ---- */
@page{size:A4;margin:0}
@media print{
  /* the document is exactly one A4 sheet: whatever else is on the page (or a rounding pixel in Safari) can't start a second one */
  html,body{background:#fff !important;width:210mm !important;height:297mm !important;overflow:hidden !important;margin:0 !important;padding:0 !important}
  body>*:not(.app){display:none !important}
  .app{display:block !important;height:auto !important;padding:0 !important}
  .preview-fab{display:none !important}
  .preview-pane{position:static !important;transform:none !important;visibility:visible !important;display:block !important}
  .panel,.zoom-ctrl,.layout-dock,.page-guide,.cv .cv-ui{display:none !important}
  .preview-pane{padding:0 !important;overflow:visible !important;background:none !important}
  .preview-stage{padding:0 !important}
  #zoomWrap{zoom:1 !important;box-shadow:none !important;margin:0 !important;transform:none !important}
  .cv{min-height:296.5mm;height:297mm;overflow:hidden} /* exactly one page, never a broken second one */
  #cv,#cv section,#cv .cv-id,#cv .cv-photo-wrap{opacity:1 !important;transform:none !important} /* never print mid-animation */
}