/* cv-maker.css — the CV sheet as /cv-maker/ and /apply/ step 4 both print it, plus the
   /cv-maker/ form. Loaded after cv-builder.css on both pages. The sheet is painted by
   cv-sheet.js.

   .cv-photo-lay  the layout in use: the navy band with the photo, a side column and personal
                  details, then work experience, studies, certificates, languages and the
                  declaration across the full width. On /cv-maker/ it is a wrapper inside
                  #cvPage; on /apply/ it is #cvPage itself.
   .cv-std        a one-column layout built on 2026-10-03 and kept, hidden, on /cv-maker/
                  only. Abhi chose the photo layout the same day. */

.cv-lay[hidden], [data-decl][hidden], .cv-page section[hidden] { display: none !important; }

/* ---------- the form and the preview ---------- */
/* The example-CV label over the sheet. Never printed: nothing outside #cvPage is. */
.cv-demo { position: absolute; z-index: 2; top: .6rem; right: .6rem; max-width: 34%; padding: .4rem .65rem;
  font-size: .76rem; font-weight: 600; line-height: 1.35; color: var(--ink); background: var(--brass-2);
  border-radius: var(--radius); box-shadow: 0 2px 10px rgba(13,27,42,.18); }
.cv-demo[hidden] { display: none; }
/* On a phone or tablet the label sits above the sheet as a plain line, where it covers
   nothing. scalePreview() adds its height to the space the preview reserves. */
@media (max-width: 1100px) { .cv-demo { position: static; max-width: none; margin: 0 0 .5rem; box-shadow: none; } }
/* Until a photo is chosen the frame shows a plain outline of a person, so the sheet shows
   where the photo goes. On screen only: a CV printed without a photo keeps an empty frame. */
@media screen {
  .cv-photo:not([style*="url("]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e9e6df'/%3E%3Ccircle cx='50' cy='39' r='18' fill='%23b9bec6'/%3E%3Cpath d='M14 100c2-24 18-36 36-36s34 12 36 36z' fill='%23b9bec6'/%3E%3C/svg%3E") !important;
    background-size: cover !important; background-position: center !important; }
}

.cvb-sec > textarea { width: 100%; }
.jobcard { border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--white);
  padding: .9rem .9rem 1rem; margin-bottom: .8rem; }
.jobcard-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.jobcard-h b { font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: var(--t-on-paper-mut); }
.jobcard .cvb-grid { gap: .75rem .9rem; }
.jobcard input, .jobcard textarea { width: 100%; background: var(--paper); }
/* on a phone the two dates share a row and everything else takes the full width */
@media (max-width: 520px) { .jobcard .f:not(.half) { grid-column: 1 / -1; } }

/* ---------- Standard layout, on the sheet ----------
   One family (the site's own Hanken Grotesk, already loaded, so it looks the same on every
   phone). Name 26pt, target job 14pt, body 10.8pt, section headings 11.5pt bold. */
.cv-page.lay-std { background-image: none; }           /* the page-break guides are for the photo layout */
.cv-std { padding: 15mm; font-size: 10.8pt; line-height: 1.45; color: #1f2933; }
.cvs-head { display: flex; gap: 8mm; align-items: flex-start; justify-content: space-between;
  padding-bottom: 4.5mm; border-bottom: .5mm solid #0d1b2a; margin-bottom: 5.5mm; }
.cvs-id { min-width: 0; flex: 1; }
.cvs-name { font-size: 26pt; font-weight: 700; line-height: 1.1; letter-spacing: -.005em; color: #0d1b2a;
  overflow-wrap: anywhere; }
.cvs-title { margin: 2mm 0 0; font-size: 14pt; font-weight: 600; color: #0d1b2a; }
.cvs-title span { font-size: 10.8pt; font-weight: 400; color: #46525e; }
.cvs-contact { margin: 2.2mm 0 0; font-size: 10.8pt; color: #2b3642; overflow-wrap: anywhere; }
.cvs-photo { width: 28mm; height: 35mm; flex: none; margin: 0; border-radius: 1mm; box-shadow: none;
  border: .25mm solid #c2cad2; background-color: #f3f1ec; background-repeat: no-repeat; }
.cvs-photo[hidden] { display: none; }

#cvPage .cv-std section { margin: 0 0 5.5mm; }
#cvPage .cv-std section:last-child { margin-bottom: 0; }
#cvPage .cv-std h2 { font-size: 11.5pt; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #0d1b2a; margin: 0 0 2.4mm; padding-bottom: 1.2mm; border-bottom: .25mm solid #d9dee3; position: relative; }
#cvPage .cv-std h2::after { content: ""; display: block; position: absolute; left: 0; bottom: -.25mm;
  width: 14mm; height: .6mm; margin: 0; background: #d99b23; opacity: 1; }
.cvs-p { margin: 0; white-space: pre-line; }

.cvs-cols { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 7mm; }
.cvs-cols li, .cvs-list li, .cvj-pts li { position: relative; padding-left: 4mm; break-inside: avoid; page-break-inside: avoid; }
.cvs-cols li { margin: 0 0 1.1mm; }
.cvs-cols li::before, .cvs-list li::before, .cvj-pts li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 1.4mm; height: 1.4mm; border-radius: 50%; background: #0d1b2a; }
.cvs-list { margin: 0; padding: 0; list-style: none; }
.cvs-list li { margin: 0 0 1.2mm; }

/* one job: title and dates on a line, employer under it, then the points */
.cvj { margin: 0 0 4.2mm; break-inside: avoid; page-break-inside: avoid; }
.cvj:last-child { margin-bottom: 0; }
.cvj-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; }
.cvj-title { font-size: 11.3pt; font-weight: 700; color: #0d1b2a; }
.cvj-dates { flex: none; font-weight: 700; color: #1f2933; white-space: nowrap; }
.cvj-co { color: #46525e; margin-top: .3mm; }
.cvj-pts { margin: 1.5mm 0 0; padding: 0; list-style: none; }
.cvj-pts li { margin: 0 0 .9mm; }

[data-langs] { break-inside: avoid; page-break-inside: avoid; }   /* the levels and their legend stay together */
/* the language table inside the Standard layout: same table as /apply, at this layout's size */
.cv-std .cv-lang-t { font-size: 10.4pt; }
.cv-std .cv-lang-t thead th { font-size: 8.6pt; white-space: nowrap; }
.cv-std .cv-lang-t th:first-child { width: 18%; }
.cv-std .cv-lang-note { font-size: 8.4pt; }

.cvs-dl { margin: 0; display: grid; grid-template-columns: 38mm 1fr 38mm 1fr; gap: 1.4mm 4mm; }
.cvs-dl dt { font-weight: 600; color: #46525e; }
.cvs-dl dd { margin: 0; overflow-wrap: anywhere; }
.cvs-dl dd.wide { grid-column: 2 / -1; }

.cv-std .cv-decl { padding: 0; margin-top: 7mm !important; break-inside: avoid; page-break-inside: avoid; }
.cv-std .cv-decl p { font-size: 9.6pt; max-width: none; }
.cv-std .cv-sign { margin-top: 9mm; }

/* the same job, list and language blocks inside the Photo header layout */
.cv-photo-lay .cv-wide { font-size: 9.9pt; color: #2b3642; }
.cv-photo-lay .cvj-title { font-size: 10.4pt; }
.cv-photo-lay .cv-wide section { margin-bottom: 7.5mm; }
.cv-photo-lay .cv-wide section:last-child { margin-bottom: 0; }
.cv-left ul[hidden], .cv-left p[hidden] { display: none; }

/* The skeleton: an empty main section keeps its heading and a dash on screen, and a row
   with no answer keeps its label. All of it is .is-empty, and none of it is printed, so
   the PDF carries only what the candidate filled in. `.measuring` lets the page counter
   see the sheet as the printer will. */
.cv-none { display: none; margin: 0; }
.is-empty > .cv-none { display: block; }
.cv-page.measuring .is-empty { display: none !important; }
@media print { #cvPage .is-empty { display: none !important; } }

/* ---------- print ----------
   Abhi, 2026-10-03: the saved PDF carried "03/10/2026, 01:55  My_CV" across the top. That
   line is the browser's own header, printed inside the paper margin, and cv-builder.css gives
   every page after the first a margin. A page with NO margin leaves the browser nowhere to
   print it, so every page is margin 0 here, and the gap at the top of each page comes from
   padding on the sheet, repeated per page by box-decoration-break: clone.

   Only where clone works across page breaks (Chrome 130+, Firefox). Elsewhere the @page rules
   in cv-builder.css stand: margin 0 without the padding would start page 2 flush against the
   paper edge. */
@media print {
  .cv-wide section, .cv-std section { break-inside: auto; page-break-inside: auto; }
  #cvPage .cv-std h2 { break-after: avoid; page-break-after: avoid; }
}
@supports (box-decoration-break: clone) {
  /* the photo layout's on-screen page guide: a continuation page holds 285mm, not 275mm */
  .cv-page.lay-photo {
    background-image:
      linear-gradient(to bottom, rgba(140,59,74,.22) 0 100%),
      linear-gradient(to bottom, transparent 0 284.2mm, rgba(140,59,74,.22) 284.2mm 285mm);
    background-size: 100% .8mm, 100% 285mm;
  }
  @media print {
    @page { size: A4; margin: 0; }
    @page :first { margin: 0; }
    #cvPage { box-decoration-break: clone; min-height: 0 !important; }

    /* Photo header: TOP padding only. A cloned bottom padding was tried and removed the same
       day: when the two-column body overflowed page 1 by a few millimetres, Chrome moved the
       whole body to page 2 and printed page 1 with the name band alone. The band is pulled
       back up over the first page's padding so it still bleeds to the edge. */
    #cvPage.lay-photo { padding-top: 12mm !important; }
    #cvPage.lay-photo .cv-band { margin-top: -12mm; }

    /* Standard: a plain single column, so both paddings repeat safely and every page has
       the same 15mm above and below. */
    #cvPage.lay-std { padding-top: 15mm !important; padding-bottom: 15mm !important; }
    #cvPage.lay-std .cv-std { padding-top: 0; padding-bottom: 0; }
  }
}