/* ==========================================================================
   Resume Builder — the five printable sheets.

   Everything here is sized in millimetres and points rather than rem: this is
   the one part of the app whose output is paper, and a resume that reflows
   with the browser's font setting is a resume whose page count depends on the
   reader's eyesight. The preview is the same markup at a smaller scale, so
   what is on screen is what comes out of the printer.
   ========================================================================== */

.rz-stage {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  overflow: auto;
}

/* ---------- The picker beside the preview ---------- */
.rz-picker { display: flex; flex-direction: column; gap: .5rem; }
/* colour and font-weight are set, not inherited: app.css skins every bare
   <button> as a solid accent control — white text, 600 weight — and a card
   that only overrides the background gets white text on a white card. */
.rz-pick {
  text-align: left; width: 100%; cursor: pointer;
  background: #fff; color: var(--ink); font-weight: 400;
  border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem .8rem; transition: border-color .18s, background .18s, box-shadow .18s;
}
.rz-pick:hover { border-color: var(--blue-200); background: var(--blue-50); }
.rz-pick__h { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .92rem; }
.rz-pick__h strong { font-weight: 600; color: var(--ink); }
.rz-pick__b { display: block; font-size: .82rem; color: var(--muted); margin-top: .18rem; line-height: 1.45; }
.rz-pick--on { border-color: var(--blue-600); background: var(--blue-50); box-shadow: 0 0 0 1px var(--blue-600) inset; }
.rz-pick--on .rz-pick__h i { color: var(--blue-600); }

/* The sheet: A4, with the margins a resume is expected to have. */
.rz {
  width: 210mm;
  min-height: 297mm;
  padding: 16mm 18mm;
  margin: 0 auto;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 6px 28px rgba(16, 30, 60, .16);
  font-size: 10.5pt;
  line-height: 1.45;
  box-sizing: border-box;
}

/* Shrunk to fit the panel without changing a single measurement — the sheet
   is still A4, it is only being looked at from further away. */
.rz-stage--fit .rz {
  transform: scale(var(--rz-scale, .72));
  transform-origin: top center;
  margin-bottom: calc((var(--rz-scale, .72) - 1) * 297mm);
}

.rz p { margin: 0 0 .45rem; }
.rz .rz-p { margin: 0 0 .5rem; text-align: justify; }
.rz-ul { margin: .25rem 0 .5rem; padding-left: 1.05rem; }
.rz-ul li { margin-bottom: .18rem; }
.rz-break { word-break: break-all; }

.rz-name { font-size: 19pt; line-height: 1.15; margin: 0; letter-spacing: .01em; }
.rz-title { font-size: 11pt; margin: .18rem 0 0; }
.rz-contact { font-size: 9.5pt; margin: .5rem 0 0; }

.rz-sec { margin-top: .95rem; }
.rz-sec__h {
  font-size: 10pt; text-transform: uppercase; letter-spacing: .09em;
  margin: 0 0 .4rem;
}

.rz-item { margin-bottom: .6rem; }
.rz-item__h { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.rz-item__when { font-size: 9pt; white-space: nowrap; }
.rz-item__sub { font-size: 9.5pt; margin-bottom: .12rem; }
.rz-item__role { font-size: 10pt; font-style: italic; margin-bottom: .15rem; }

.rz-stack { list-style: none; margin: 0; padding: 0; }
.rz-stack li { margin-bottom: .28rem; }
.rz-lvl { display: block; font-size: 8.5pt; font-style: normal; opacity: .72; }

.rz-row { display: flex; gap: .6rem; margin-bottom: .25rem; font-size: 10pt; }
.rz-row__k { flex: 0 0 26mm; font-weight: 600; }
.rz-row__v { flex: 1; }

/* ---------- 1. Classic: serif, centred header, hairline rules ---------- */
.rz--classic { font-family: 'Georgia', 'Times New Roman', serif; }
.rz--classic .rz-head { text-align: center; border-bottom: 1.5pt solid #1a1a1a; padding-bottom: .5rem; }
.rz--classic .rz-name { text-transform: uppercase; letter-spacing: .06em; }
.rz--classic .rz-sec__h { border-bottom: .5pt solid #999; padding-bottom: .12rem; }

/* ---------- 2. Modern: tinted sidebar, sans, accent headings ---------- */
.rz--modern { font-family: 'Helvetica Neue', Arial, sans-serif; padding: 0; }
.rz--modern .rz-head { background: #12305e; color: #fff; padding: 12mm 14mm 9mm; }
.rz--modern .rz-title { opacity: .85; }
/* A table, not flex or grid: only table rows break across printed pages
   cleanly, and this layout has to survive going to two sheets. */
.rz--modern .rz-cols { display: table; width: 100%; table-layout: fixed; }
.rz--modern .rz-side,
.rz--modern .rz-main { display: table-cell; vertical-align: top; }
.rz--modern .rz-side { width: 58mm; background: #f2f5fa; padding: 9mm 7mm 12mm 14mm; font-size: 9.5pt; }
.rz--modern .rz-main { padding: 9mm 14mm 12mm 8mm; }
.rz--modern .rz-sec__h { color: #12305e; font-weight: 700; }
.rz--modern .rz-side .rz-sec__h { border-bottom: 1pt solid #c9d6e8; padding-bottom: .15rem; }

/* ---------- 3. ATS: no rules, no colour, nothing to misparse ---------- */
.rz--ats { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; }
.rz--ats .rz-name { font-size: 16pt; font-weight: 700; text-transform: none; }
.rz--ats .rz-sec__h { font-weight: 700; letter-spacing: .04em; }
.rz--ats .rz-p { text-align: left; }
.rz--ats .rz-head .rz-stack { margin-top: .4rem; font-size: 10.5pt; }

/* ---------- 4. Technical: split header, skills matrix ---------- */
.rz--technical { font-family: 'Helvetica Neue', Arial, sans-serif; }
.rz--technical .rz-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  border-bottom: 2pt solid #0f766e; padding-bottom: .55rem;
}
/* min-width:0 so a long job title wraps instead of pushing the contact
   block off the right edge of the sheet. */
.rz--technical .rz-head__l { min-width: 0; }
.rz--technical .rz-head__r { list-style: none; margin: 0; padding: 0; text-align: right; font-size: 9pt; }
.rz--technical .rz-sec__h { color: #0f766e; font-weight: 700; }
.rz--technical .rz-matrix { border-left: 2pt solid #d5e5e3; padding-left: .7rem; }
.rz--technical .rz-row__k { color: #0f766e; }

/* ---------- 5. Executive: wide margins, lead paragraph, strip ---------- */
.rz--executive { font-family: 'Georgia', 'Times New Roman', serif; padding: 20mm 22mm; }
.rz--executive .rz-head { border-bottom: .75pt solid #8a7a55; padding-bottom: .6rem; }
.rz--executive .rz-name { font-size: 22pt; letter-spacing: .04em; }
.rz--executive .rz-title { font-size: 11.5pt; font-style: italic; color: #6b5c3d; }
.rz--executive .rz-lead {
  font-size: 11pt; line-height: 1.55; margin: .9rem 0 .2rem; text-align: justify;
}
.rz--executive .rz-strip {
  display: flex; flex-wrap: wrap; gap: .25rem .9rem;
  border-top: .5pt solid #ddd; border-bottom: .5pt solid #ddd;
  padding: .4rem 0; margin: .7rem 0 .2rem; font-size: 9.5pt; letter-spacing: .02em;
}
.rz--executive .rz-sec__h { color: #6b5c3d; font-variant: small-caps; letter-spacing: .06em; font-size: 11pt; }

/* ---------- Printing ----------------------------------------------------
   The sheet that prints is a second copy of the same markup, rendered into a
   portal at the end of <body> and hidden on screen. The obvious alternative —
   hiding the app with visibility:hidden and pulling the preview out with
   position:absolute — leaves the whole page still occupying its pages, so a
   one-page resume comes out of the printer followed by two blank sheets. Here
   the app is display:none during print and there is nothing left to paginate.
   ---------------------------------------------------------------------- */
@page { size: A4; margin: 0; }

.rz-print { display: none; }

@media print {
  body > *:not(.rz-print) { display: none !important; }
  .rz-print { display: block; }
  .rz {
    margin: 0; box-shadow: none; transform: none;
    width: 210mm; min-height: 297mm;
  }
  /* Sidebar and rule colours are the layout, not decoration — without this
     most browsers drop them and the Modern sheet prints as bare text. */
  .rz--modern .rz-head,
  .rz--modern .rz-side { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Never split a role from its heading, or strand one line on a page. */
  .rz-item, .rz-sec { break-inside: avoid; page-break-inside: avoid; }
  .rz-sec__h { break-after: avoid; page-break-after: avoid; }
  .rz p, .rz li { orphans: 2; widows: 2; }
}