/* ============================================================
   CV Builder — /cv-builder/
   Split layout: form (left) + live A4 preview (right).
   Preview is a true 210x297mm page so print output is exact.
   ============================================================ */

.cvb-wrap .lede { max-width: 62ch; margin-bottom: 1.6rem; }

/* ---- mobile tabs (hidden on desktop, where both panes show) ---- */
.cvb-tabs { display: flex; gap: .4rem; margin-bottom: 1.4rem; }
.cvb-tabs button {
  flex: 1; padding: .7rem 1rem; font: inherit; font-size: .9rem; font-weight: 600;
  border: 1px solid var(--line-light); background: var(--paper); color: var(--t-on-paper-mut);
  border-radius: var(--radius); cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.cvb-tabs button.on { background: var(--ink); color: var(--t-on-ink); border-color: var(--ink); }

.cvb-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2rem; align-items: start; }

/* ---- form side ---- */
.cvb-sec { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--line-light); }
.cvb-sec:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.cvb-sec > .eyebrow { display: block; margin-bottom: 1rem; }
.cvb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.cvb-form .f.full, .cvb-grid .f.full { grid-column: 1 / -1; }
.cvb-form label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.cvb-form label .opt { font-weight: 400; color: var(--t-on-paper-mut); }
.cvb-form input, .cvb-form textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--line-light); border-radius: var(--radius);
  font: inherit; font-size: .93rem; color: var(--ink); background: var(--paper);
}
.cvb-form input:focus, .cvb-form textarea:focus { outline: none; border-color: var(--brass); background: var(--white); }
.cvb-form textarea { resize: vertical; }
.cvb-form .hint { font-size: .78rem; color: var(--t-on-paper-mut); margin-top: .35rem; }

.cvb-photo-row { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.1rem; }
.cvb-photo-prev {
  width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden;
  border: 2px dashed var(--line-light); background: var(--paper);
  display: grid; place-items: center; font-size: .7rem; color: var(--t-on-paper-mut); text-align: center;
}
.cvb-photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.cvb-photo-prev.has { border-style: solid; border-color: var(--green-deep); }
.uploadbtn {
  display: inline-block; padding: .6rem 1rem; border: 1px solid var(--line-light); border-radius: var(--radius);
  background: var(--paper); font-size: .88rem; font-weight: 600; cursor: pointer;
}
.uploadbtn:hover { border-color: var(--brass); background: var(--white); }

.rowline { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-bottom: .5rem; }
.rowline input { font-size: .9rem; }
.rowline button {
  border: 1px solid var(--line-light); background: var(--paper); border-radius: var(--radius);
  width: 38px; cursor: pointer; color: #b3402a; font-size: 1.1rem; line-height: 1;
}
.addrow {
  border: 1px dashed var(--line-light); background: transparent; border-radius: var(--radius);
  padding: .5rem .9rem; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--brass-ink); cursor: pointer;
}
.addrow:hover { border-color: var(--brass); background: var(--brass-soft); }

.cvb-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.cvb-actions .btn { flex: 1 1 auto; justify-content: center; }
.btn-line { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--t-on-ink); }

/* ---- preview side: a real A4 page ---- */
/* The CV document sets its OWN type. Fraunces (site display face) is a serif
   with optical sizing — wrong for a utilitarian CV read by employers and visa
   staff. The whole document uses the grotesk, with hierarchy carried by weight,
   size and tracking instead of by typeface. */
.cvb-preview { position: sticky; top: 90px; }
.cv-page {
  width: 210mm; min-height: 297mm; transform-origin: top left;
  background: #fff; color: #2b3642;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 9.6pt; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 10px 40px rgba(13,27,42,.16);
}

/* band */
.cv-band { background: #8c3b4a; color: #fff; display: flex; align-items: center;
  gap: 12mm; padding: 9mm 12mm 9mm 0; min-height: 44mm; }
.cv-photo { width: 40mm; height: 40mm; flex: none; margin-left: 11mm; border-radius: 50%;
  background: #f3f0ea center/cover no-repeat; box-shadow: 0 0 0 2.6mm #fff; }
.cv-band-txt h1 { font-family: inherit; font-size: 21pt; font-weight: 700;
  letter-spacing: .06em; margin: 0; color: #fff; line-height: 1.1; }
.cv-band-txt p { font-size: 13.5pt; font-weight: 400; letter-spacing: .01em;
  margin: 2.5mm 0 0; color: rgba(255,255,255,.95); line-height: 1.2; }

/* columns */
.cv-body { display: grid; grid-template-columns: 58mm 1fr; gap: 9mm; padding: 9mm 12mm 3mm; }
.cv-page h2 { font-family: inherit; font-size: 10.5pt; font-weight: 700;
  color: #8c3b4a; margin: 0 0 1.8mm; letter-spacing: .1em; text-transform: uppercase; }
.cv-left section, .cv-right section { margin-bottom: 6.5mm; }
.cv-page h2::after { content: ""; display: block; width: 17mm; height: .9mm;
  background: #8c3b4a; margin: 1.6mm 0 3mm; }

/* left rail */
.cv-left p { margin: 0; font-weight: 600; font-size: 9.6pt; color: #2b3642; }
.cv-left dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2.2mm 3mm; align-items: baseline; }
.cv-left dt { font-weight: 700; font-size: 8.6pt; letter-spacing: .01em; color: #3a4552; }
.cv-left dd { margin: 0; font-size: 9pt; color: #2b3642; }

/* right column */
.cv-obj { margin: 0; font-size: 9.4pt; line-height: 1.6; color: #3a4552; }
.cv-pd { margin: 0; display: grid; grid-template-columns: 32mm 1fr; gap: 2.6mm 4mm; align-items: baseline; }
.cv-pd dt { font-weight: 700; font-size: 8.8pt; letter-spacing: .01em; color: #3a4552; position: relative; }
.cv-pd dt::after { content: ":"; position: absolute; right: -2.5mm; font-weight: 400; color: #93a0ad; }
.cv-pd dd { margin: 0; font-size: 9.4pt; white-space: pre-line; color: #2b3642; }

/* declaration */
.cv-decl { padding: 2mm 12mm 10mm; }
.cv-decl p { margin: 0; font-size: 9pt; line-height: 1.55; color: #3a4552; }
.cv-sign { display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 14mm; font-size: 9pt; font-weight: 600; color: #2b3642; }
.cv-sign b { font-weight: 400; color: #3a4552; }
.cv-sign .sig { border-top: .3mm solid #c3ccd4; padding-top: 1.6mm; min-width: 46mm; text-align: center; }

/* ---- responsive: stack + tabs under 1100px ---- */
@media (max-width: 1100px) {
  .cvb-split { grid-template-columns: 1fr; }
  .cvb-preview { position: static; overflow-x: auto; }
  .cvb-split > .cvb-form[hidden], .cvb-split > .cvb-preview[hidden] { display: none; }
}
@media (min-width: 1101px) { .cvb-tabs { display: none; } }
@media (max-width: 620px) { .cvb-grid { grid-template-columns: 1fr; } }

/* ---- print: the CV page only, at exact A4 ---- */
/* (old .cvb-wrap-scoped print block removed — it hid the CV on /apply/) */

/* ============================================================
   Timeline flow on /apply/  (rail + step panels + photo tools)
   ============================================================ */
.tl-rail { list-style: none; display: flex; margin: 0 0 2rem; padding: 0; counter-reset: s; }
.tl-rail li { flex: 1; position: relative; text-align: center; cursor: pointer; padding-top: 2.4rem; }
.tl-rail li::before { content: ""; position: absolute; top: 1.05rem; left: 0; right: 0;
  height: 2px; background: var(--line-light); }
.tl-rail li:first-child::before { left: 50%; }
.tl-rail li:last-child::before { right: 50%; }
.tl-rail .dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--line-light);
  font-size: .82rem; font-weight: 700; color: var(--t-on-paper-mut); transition: all .3s; }
.tl-rail .lb { font-size: .76rem; font-weight: 600; color: var(--t-on-paper-mut); letter-spacing: .01em; }
.tl-rail li.done .dot { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.tl-rail li.done .lb { color: var(--t-on-paper); }
.tl-rail li.on .dot { background: var(--ink); border-color: var(--ink); color: var(--t-on-ink); transform: translateX(-50%) scale(1.12); }
.tl-rail li.on .lb { color: var(--ink); font-weight: 700; }

.tl-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light); }
.tl-count { font-size: .82rem; font-weight: 600; color: var(--t-on-paper-mut); }
.step-panel[hidden] { display: none; }
.form-field label .opt { font-weight: 400; color: var(--t-on-paper-mut); }

/* photo controls */
.cv-photo-ctl { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.3rem; }
.cvb-photo-prev { background-repeat: no-repeat; }
.cv-photo-tools { flex: 1 1 240px; }
.zoomrow { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.zoomrow label { margin: 0; font-size: .8rem; }
.zoomrow input[type=range] { flex: 1; accent-color: var(--brass-ink); }
.zbtn { width: 30px; height: 30px; border: 1px solid var(--line-light); background: var(--paper);
  border-radius: var(--radius); font-size: 1rem; line-height: 1; cursor: pointer; color: var(--ink); }
.zbtn:hover { border-color: var(--brass); background: var(--white); }
.cv-photo.draggable { cursor: grab; }
.cv-photo.draggable:active { cursor: grabbing; }

@media (max-width: 620px) {
  .tl-rail .lb { display: none; }
  .tl-rail li { padding-top: 2.2rem; }
}

/* ---- fixes: .hint was scoped to .cvb-form; this form is .apply-card ------- */
.apply-card .hint,
.cv-photo-tools .hint { font-size: .8rem; line-height: 1.45; color: var(--t-on-paper-mut); margin: .4rem 0 0; }
.step-panel > .hint { margin: -.3rem 0 1.4rem; max-width: 58ch; }

/* ---- photo control: one tidy panel, not four loose parts ---------------- */
.cv-photo-ctl {
  display: flex; gap: 1.1rem; align-items: center; flex-wrap: nowrap;
  padding: 1rem 1.1rem; margin-bottom: 1.4rem;
  border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--paper);
}
.cv-photo-ctl .cvb-photo-prev { width: 72px; height: 72px; }
.cv-photo-tools { flex: 1 1 auto; min-width: 0; }
.cv-photo-tools .uploadbtn { display: inline-block; padding: .5rem .9rem; font-size: .85rem; }
.zoomrow { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.zoomrow label { margin: 0; font-size: .78rem; font-weight: 600; color: var(--t-on-paper-mut); flex: none; }
.zoomrow input[type=range] { flex: 1 1 auto; min-width: 0; height: 4px; accent-color: var(--brass-ink); }
.zbtn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
@media (max-width: 620px) {
  .cv-photo-ctl { flex-wrap: wrap; }
  .cv-photo-tools { flex: 1 1 100%; }
}

/* ---- address block --------------------------------------------------- */
.addr-block {
  margin-top: 1.3rem; padding: 1.2rem 1.2rem 1.3rem;
  border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--paper);
}
.addr-h {
  display: block; margin-bottom: 1rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink);
}
.addr-block input[readonly] { background: var(--paper-2); color: var(--t-on-paper-mut); cursor: default; }
/* #age becomes readonly once a date of birth is entered (it is derived from it).
   Same treatment as the readonly address fields so it reads as "filled for you"
   rather than broken. (2026-08-08) */
.apply-card #age[readonly] { background: var(--paper-2); color: var(--t-on-paper-mut); cursor: default; }
.addr-block .form-field select { width: 100%; }

/* ============================================================
   UX pass — reassurance, rhythm, touch targets, feedback
   ============================================================ */

/* intro: set expectations before the first field (time + privacy) */
.apply-intro { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center;
  margin: 0 0 1.8rem; padding: .9rem 1.1rem; border-radius: var(--radius);
  background: var(--paper-2); }
.apply-intro span { display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 600; color: var(--t-on-paper); }
.apply-intro svg { width: 15px; height: 15px; stroke: var(--green-deep); fill: none; stroke-width: 2; flex: none; }

/* saved-progress toast */
.save-note { position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 1.5rem);
  background: var(--ink); color: var(--t-on-ink); font-size: .8rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s; z-index: 60; }
.save-note.on { opacity: 1; transform: translate(-50%, 0); }

/* rail: completion is earned, not implied */
.tl-rail li.done .dot::after { content: "✓"; font-size: .9rem; }
.tl-rail li.done .dot { font-size: 0; }
.tl-rail li:not(.on):not(.done) .dot { background: var(--white); }

/* generous field rhythm + real touch targets (44px min) */
.step-panel .form-grid { gap: 1.35rem 1.3rem; }
.apply-card .form-field input,
.apply-card .form-field select,
.apply-card .form-field textarea { padding: .85rem 1rem; font-size: 1rem; min-height: 48px; }
.apply-card .form-field label { font-size: .8rem; letter-spacing: .01em; margin-bottom: .45rem; }
.apply-card .form-field textarea { min-height: 92px; }

/* inline validity: quiet success, loud failure */
.form-field.ok input, .form-field.ok select { border-color: rgba(53,122,31,.5); }
.form-field.err input, .form-field.err select, .form-field.err textarea { border-color: #b3402a; background: #fdf6f4; }
.form-field .err-msg { font-weight: 600; }

/* helper text that answers "why are you asking?" */
.why { font-size: .78rem; color: var(--t-on-paper-mut); margin: .35rem 0 0; }

/* step nav: sticky on mobile so Continue is always reachable */
.tl-nav .btn { min-height: 48px; padding-inline: 1.4rem; }

/* photo: dropzone first, controls only once there is something to control */
.cv-photo-ctl { display: block; padding: 0; border: 0; background: none; margin-bottom: 1.4rem; }
.cv-adjust { padding: 1rem 1.1rem; border: 1px solid var(--line-light);
  border-radius: var(--radius); background: var(--paper); }
.cv-adjust[hidden] { display: none; }
.cv-adjust-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.cv-adjust-t { font-size: .84rem; font-weight: 700; color: var(--ink); }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: .82rem;
  font-weight: 600; color: var(--brass-ink); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.zoomrow { display: flex; align-items: center; gap: .7rem; margin: 0; }
.zbtn { width: 34px; height: 34px; font-size: 1.05rem; }

/* ============================================================
   Desktop width + CV document refinement
   A4 at 96dpi = 794px. The card was 760px, so the CV was always
   scaled DOWN and could never be read. Card now clears 794px of
   inner width, so fit() lands on scale 1.0 and the CV renders
   at true size.
   ============================================================ */
@media (min-width: 940px) {
  .apply-card { max-width: 1080px; padding: 3rem 3.2rem; }
  .cvb-wrap .wrap, .sec .wrap { max-width: 1160px; }
}
@media (min-width: 1240px) {
  .apply-card { max-width: 1140px; }
}

/* photo ring: 2.6mm was a thick white collar. Hairline instead. */
.cv-photo { box-shadow: 0 0 0 1mm rgba(255,255,255,.92); }

/* ---- CV document: proportion, rhythm, restraint ---------------------- */
.cv-page { font-size: 9.8pt; line-height: 1.52; color: #2f3a46; }

/* band: shallower, better balanced, name given room to breathe */
.cv-band { min-height: 40mm; padding: 8mm 12mm 8mm 0; gap: 11mm; align-items: center; }
.cv-photo { width: 36mm; height: 36mm; margin-left: 12mm; }
.cv-band-txt h1 { font-size: 19pt; font-weight: 600; letter-spacing: .14em; }
.cv-band-txt p { font-size: 14pt; font-weight: 500; margin-top: 3mm; letter-spacing: 0; }

/* two columns: wider rail, cleaner gutter, hairline divider between them */
.cv-body { grid-template-columns: 56mm 1fr; gap: 11mm; padding: 10mm 12mm 4mm; position: relative; }
.cv-right { border-left: .25mm solid #e6e2db; padding-left: 10mm; margin-left: -1mm; }

/* headings: smaller, wider tracking, shorter rule. Restraint over shout. */
.cv-page h2 { font-size: 9.4pt; font-weight: 700; letter-spacing: .16em; color: #8c3b4a; margin-bottom: 0; }
.cv-page h2::after { width: 11mm; height: .6mm; margin: 1.8mm 0 3.4mm; opacity: .85; }
.cv-left section, .cv-right section { margin-bottom: 7.5mm; }
.cv-left section:last-child, .cv-right section:last-child { margin-bottom: 0; }

/* left rail values sit quieter than their labels */
.cv-left p { font-size: 10pt; font-weight: 600; color: #1f2933; }
.cv-left dl { gap: 2.6mm 3mm; }
.cv-left dt { font-size: 8.2pt; font-weight: 600; color: #6b7681; letter-spacing: .02em; }
.cv-left dd { font-size: 9.2pt; font-weight: 500; color: #1f2933; }

/* personal details: aligned colon column, generous leading */
.cv-pd { grid-template-columns: 30mm 1fr; gap: 3mm 5mm; }
.cv-pd dt { font-size: 8.4pt; font-weight: 600; color: #6b7681; letter-spacing: .02em; }
.cv-pd dt::after { right: -3mm; color: #c2cad2; }
.cv-pd dd { font-size: 9.4pt; color: #1f2933; line-height: 1.5; }
.cv-obj { font-size: 9.4pt; line-height: 1.65; color: #46525e; }

/* declaration: separated by space, not by a box */
.cv-decl { padding: 6mm 12mm 11mm; }
.cv-decl h2 { margin-bottom: 0; }
.cv-decl p { font-size: 8.8pt; line-height: 1.6; color: #46525e; max-width: 165mm; }
.cv-sign { margin-top: 15mm; font-size: 8.8pt; }
.cv-sign .sig { border-top: .25mm solid #c2cad2; padding-top: 2mm; min-width: 52mm; font-weight: 600; }

/* ============================================================
   FIX: preview container inside the step flow
   `position:sticky` was a leftover from the old side-by-side
   builder. Inside a step panel it detached the page from normal
   flow, so the A4 sheet overflowed right and the Download button
   rode up beside it. Preview is now a plain, centred block.
   ============================================================ */
.step-panel .cvb-preview {
  position: static;
  display: flex; justify-content: center;
  width: 100%; overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: 1.6rem;
}
.step-panel .cvb-preview .cv-page {
  transform-origin: top center;
  box-shadow: 0 6px 28px -10px rgba(13,27,42,.28), 0 0 0 1px rgba(13,27,42,.06);
  flex: none;
}
/* the sheet is a true A4 page: keep the proportion, lose the dead void by
   letting short CVs end naturally while still printing full-page */
.step-panel .cv-page { min-height: 0; }

/* download sits below the sheet, never beside it */
#btnPdf { display: block; clear: both; }

/* ---- documents step: one column, clear grouping ---------------------- */
.doc-group { margin-top: 1.5rem; }
.doc-group > label { display: block; font-size: .84rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.doc-group .why { margin-top: .5rem; }
.doc-help { margin-top: 1.5rem; border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--paper); }
.doc-help > summary { cursor: pointer; padding: .85rem 1.1rem; font-size: .86rem; font-weight: 600; color: var(--ink); list-style: none; }
.doc-help > summary::-webkit-details-marker { display: none; }
.doc-help > summary::after { content: "+"; float: right; color: var(--brass-ink); font-size: 1.1rem; line-height: 1; }
.doc-help[open] > summary::after { content: "−"; }
.doc-help-body { padding: 0 1.1rem 1.1rem; }
.doc-help-body .file-drop { margin-top: .8rem; }

/* ---- terms & conditions disclosure (step 5) — long legal text stays
   collapsed until opened, then scrolls in place instead of stretching the page ---- */
.terms-details { margin-top: 1rem; }
.terms-body { max-height: 320px; overflow-y: auto; font-size: .82rem; line-height: 1.6; color: var(--t-on-paper-mut); border-top: 1px solid var(--line-light); padding-top: .9rem; }
.terms-body h3 { margin: 0 0 .7rem; font-family: var(--display); font-size: 1rem; font-weight: 600; color: var(--ink); }
.terms-body p { margin: 0 0 .85rem; }
.terms-body p:last-child { margin-bottom: 0; }
.terms-body b { color: var(--ink); }

/* ============================================================
   CV palette + masthead hierarchy
   Maroon came from the reference template, not the brand. Navy
   (--ink) with a turmeric rule is the Disha palette. And the
   NAME is the subject of the document, so it leads: the words
   "Curriculum Vitae" are only a label and now behave like one.
   ============================================================ */
.cv-band { background: #0d1b2a; }
.cv-page h2 { color: #0d1b2a; }
.cv-page h2::after { background: #d99b23; opacity: 1; }

/* masthead: label small and quiet, name large and dominant */
.cv-band-txt h1 {
  font-size: 8.6pt; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: rgba(243,238,228,.62);
  margin: 0 0 3.5mm; line-height: 1;
}
.cv-band-txt p {
  font-size: 25pt; font-weight: 600; letter-spacing: -.005em;
  line-height: 1.08; margin: 0; color: #fff;
}

/* turmeric hairline tying the name to the brand accent */
.cv-band-txt { position: relative; padding-bottom: 1mm; }
.cv-band-txt::after {
  content: ""; display: block; width: 16mm; height: .7mm;
  background: #d99b23; margin-top: 4mm;
}

/* photo ring reads against navy rather than maroon */
.cv-photo { box-shadow: 0 0 0 .9mm rgba(243,238,228,.85); }

/* ---- section headings: no rule. Space and weight do the separating. ---- */
.cv-page h2::after { content: none; }
.cv-page h2 { margin: 0 0 2.6mm; }
.cv-left section, .cv-right section { margin-bottom: 8mm; }
.cv-decl h2 { margin-bottom: 2.2mm; }

/* ---- signature pad ---------------------------------------------------- */
.sig-ctl { margin-top: 1.1rem; padding: 1rem 1.1rem; border: 1px solid var(--line-light);
  border-radius: var(--radius); background: var(--paper); }
.sig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; }
.sig-actions { display: flex; gap: 1rem; }
#sigPad { display: block; width: 100%; height: 120px; background: var(--white);
  border: 1px dashed var(--line-light); border-radius: var(--radius);
  cursor: crosshair; touch-action: none; }
#sigPad.has { border-style: solid; border-color: var(--green-deep); }
.sig-ctl .why { margin-top: .6rem; }

/* signature on the CV: image sits ON the rule, label beneath */
.cv-sign .sig { display: flex; flex-direction: column; align-items: center;
  border-top: 0; padding-top: 0; min-width: 52mm; }
.cv-sign .sig #cvSigImg { display: block; max-width: 46mm; max-height: 13mm;
  object-fit: contain; margin-bottom: 1mm; }
.cv-sign .sig #cvSigImg[hidden] { display: none; }
.cv-sign .sig-lb { border-top: .25mm solid #c2cad2; padding-top: 2mm;
  width: 100%; text-align: center; font-weight: 600; }

/* err-msg outside a .form-field would render always-on at body size.
   Belt-and-braces so no future block repeats that. */
.step-panel .err-msg { font-size: .78rem; font-weight: 600; color: #b3402a; margin-top: .35rem; }
.step-panel .form-field:not(.err) > .err-msg { display: none; }
.doc-group > label { margin-bottom: .5rem; }

/* form fills the same measure as the header nav (site --maxw 1280) */
@media (min-width: 940px) {
  .apply-card { max-width: none; padding: 3rem 3.4rem; }
  .cvb-wrap .wrap, .sec .wrap { max-width: var(--maxw); }
}
@media (min-width: 1240px) { .apply-card { max-width: none; } }

/* scan instructions: visible, two-up, not buried in a disclosure */
.scan-how { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line-light);
  border-radius: var(--radius); background: var(--paper); }
.scan-how-t { display: block; font-size: .84rem; font-weight: 700; color: var(--ink); margin-bottom: .8rem; }
.scan-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; }
.scan-how-grid b { font-size: .82rem; color: var(--ink); }
.scan-how-grid .why { margin-top: .25rem; }
.scan-how > .why { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line-light); }
@media (max-width: 620px) { .scan-how-grid { grid-template-columns: 1fr; } }

/* ---- step headings centred, with the rule balanced on both sides ------- */
.step-panel > .form-section > .eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; text-align: center; margin-bottom: 1.4rem;
}
.step-panel > .form-section > .eyebrow::before,
.step-panel > .form-section > .eyebrow::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .45; flex: none;
}
/* the intro line under a centred heading reads better centred too */
.step-panel > .form-section > .hint { text-align: center; margin-inline: auto; }
.sig-ctl .err-msg { display: none; }
.sig-ctl.err .err-msg { display: block; }
.sig-ctl.err #sigPad { border-color: #b3402a; border-style: solid; background: #fdf6f4; }

/* ============================================================
   PRINT — rewritten for /apply/
   The previous block scoped to .cvb-wrap/.cvb-split, which only
   existed on the retired /cv-builder/ page. On /apply/ that rule
   hid every top-level element, so printing produced a blank page.
   visibility (not display) keeps layout intact while showing only
   the CV, and works regardless of surrounding page structure.
   ============================================================ */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  /* `visibility:hidden` hides paint but KEEPS layout space, so every form step,
     the timeline rail and the nav were still occupying full height - and
     `.step-panel[hidden]{display:block}` below forced all 5 steps to lay out at
     once. The CV printed on page 1 and all that invisible height became trailing
     BLANK PAGES. Remove them from layout instead, walking the known ancestor
     chain: section.section > .wrap > #applyForm > .step-panel > .form-section >
     #cvbPreview > #cvPage. */
  body > *:not(section.section) { display: none !important; }
  section.section > *:not(.wrap) { display: none !important; }
  .wrap > *:not(#applyForm) { display: none !important; }
  #applyForm > *:not(.step-panel) { display: none !important; }
  .step-panel:not(:has(#cvPage)) { display: none !important; }
  .step-panel > *:not(.form-section) { display: none !important; }
  .form-section:not(:has(#cvPage)) { display: none !important; }
  .form-section > *:not(#cvbPreview) { display: none !important; }
  #cvbPreview > *:not(#cvPage) { display: none !important; }
  #cvPage, #cvPage * { display: revert !important; visibility: visible !important; }
  #cvPage {
    position: absolute !important; left: 0 !important; top: 0 !important;
    width: 210mm !important; min-height: 297mm !important;
    margin: 0 !important; transform: none !important;
    box-shadow: none !important; border-radius: 0 !important;
  }
  .cvb-preview { position: static !important; padding: 0 !important; border: 0 !important;
    background: none !important; height: auto !important; overflow: visible !important; }
  .step-panel[hidden]:has(#cvPage) { display: block !important; }  /* only the CV's own step */
  .cv-band { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* pagination: never split a section, never orphan the signature */
  .cv-left section, .cv-right section,
  .cv-pd, .cv-left dl, .cv-decl { break-inside: avoid; page-break-inside: avoid; }
  .cv-pd dt, .cv-pd dd, .cv-left dt, .cv-left dd { break-inside: avoid; page-break-inside: avoid; }
  .cv-decl { break-before: auto; page-break-before: auto; }
  .cv-sign { break-inside: avoid; page-break-inside: avoid; }
  .cv-band { break-after: avoid; page-break-after: avoid; }
  /* a page 2 starts flush at the sheet edge under margin:0 — give it air */
  .cv-body { padding-top: 10mm; }
}

/* one-page fit indicator (screen only) */
.cv-fit { display: flex; align-items: center; gap: .5rem; margin-top: .8rem;
  font-size: .8rem; font-weight: 600; }
.cv-fit.ok { color: var(--green-deep); }
.cv-fit.over { color: #b3402a; }
.cv-fit .why { margin: 0; font-weight: 400; color: var(--t-on-paper-mut); }

/* upload icon: .file-drop centres its text but the SVG had no auto margins,
   so it sat pinned to the left while the labels centred under it. */
.file-drop svg { display: block; margin-inline: auto; margin-bottom: .55rem; }
.file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.file-drop .fd-main, .file-drop .fd-sub { width: 100%; }

/* ============================================================
   FIX: step nav must stay INSIDE the card
   The earlier sticky rule used margin-inline:-gut to go full-bleed,
   which tore the nav out of the white .apply-card and left it
   floating on the paper background with Continue past the card
   edge. It now stays within the card at every width.
   ============================================================ */
.tl-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 2rem 0 0; padding-top: 1.4rem;
  border-top: 1px solid var(--line-light); background: transparent;
  position: static; box-shadow: none; inset: auto;
}
.tl-nav .btn { flex: 0 0 auto; }
.tl-count { flex: 1 1 auto; text-align: center; }

@media (max-width: 420px) {
  .tl-count { display: none; }   /* rail already shows position; keep buttons roomy */
}


/* ============================================================
   FINAL: step nav is a plain in-flow row inside the card.
   Sticky positioning made it look detached from the card on
   narrow windows, so it is gone. Predictable at every width.
   ============================================================ */
.tl-nav {
  position: static !important;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%;
  margin: 2.2rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid var(--line-light);
  background: transparent; box-shadow: none;
}
.tl-nav .btn { flex: 0 0 auto; min-width: 108px; justify-content: center; }
.tl-nav .tl-count { flex: 1 1 auto; text-align: center; white-space: nowrap; }
@media (max-width: 480px) {
  .tl-nav { gap: .6rem; }
  .tl-nav .btn { min-width: 0; padding-inline: 1rem; }
  .tl-nav .tl-count { font-size: .74rem; }
}

/* ---- breathing room between form rows -------------------------------- */
/* Fields carry helper text of differing lengths, so a flat grid gap leaves
   some rows looking cramped. Give each field a floor of its own. */
.step-panel .form-grid { gap: 1.7rem 1.4rem; }
.step-panel .form-field { display: flex; flex-direction: column; }
.step-panel .form-field .why { margin-top: .45rem; }
.step-panel .form-field + .form-field { margin-top: 0; }
/* the extras grid sits under the main grid inside a section */
.step-panel .form-grid + .form-grid { margin-top: 1.7rem; }

/* Fields that sit OUTSIDE a .form-grid (e.g. Key skills, which follows the
   grid as a standalone block) get no row-gap from the grid, so they need an
   explicit margin. Without this they butt against the previous row's helper. */
/* Only fields OUTSIDE a grid need a margin. Applying it to any adjacent
   .form-field also hit grid cells, pushing every column after the first
   downward and breaking row alignment. */
.step-panel .form-section > .form-grid + .form-field,
.step-panel .form-section > .form-field + .form-field,
.step-panel .form-section > .form-grid + .addr-block,
.step-panel .form-section > .form-field + .form-grid { margin-top: 1.7rem; }
/* grid cells must never carry a stray top margin */
.step-panel .form-grid > .form-field { margin-top: 0; align-self: start; }

/* ---- cautionary note (originals reminder) ---------------------------- */
.doc-note {
  margin-top: 1.6rem; padding: 1rem 1.15rem;
  border: 1px solid var(--brass); border-left-width: 1px;
  border-radius: var(--radius); background: var(--brass-soft);
}
.doc-note-t {
  display: block; font-size: .84rem; font-weight: 700;
  color: var(--brass-ink); margin-bottom: .4rem;
}
.doc-note p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--t-on-paper); }

/* Photo is required (2026-08-12). The step-4 photo is the submitted passport-size
   photo, so a missing one has to be as visible as any other required field. */
.cv-photo-ctl.err .file-drop { border-color: #b3402a; background: #fdf3f1; }
.cv-photo-ctl.err .fd-main { color: #b3402a; }

/* Guidance under the passport upload. Sits outside .file-drop so clicking it
   does not re-open the file picker mid-read. */
.fd-note {
  margin-top: .7rem; font-size: .82rem; line-height: 1.55;
  color: var(--t-on-paper-mut); max-width: 62ch;
}
.fd-note strong { color: var(--t-on-paper); font-weight: 700; }


/* Date of birth: three selects instead of a native date input.
   The native picker opened on the MAX allowed date (twenty years ago) while the
   field still displayed the current year, and reaching a birth year meant paging
   back through decades one month at a time. Three selects remove the navigation
   entirely, and because the year list only contains the recruitable band, an
   out-of-range birth date cannot be chosen at all rather than being rejected
   after the fact. */
.dob-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: .5rem; }
.dob-row select { width: 100%; min-width: 0; }
@media (max-width: 420px) { .dob-row { grid-template-columns: 1fr 1fr; } .dob-row select:last-child { grid-column: 1 / -1; } }


/* Step heading: the eyebrow alone told you which number you were on but not what
   the step was for. A name plus one line of contents sets expectations before the
   candidate starts filling, which is what makes a long form feel finishable. */
.step-title {
  font-family: var(--display); font-size: 1.5rem; line-height: 1.2;
  color: var(--ink); margin: .35rem 0 .2rem; font-weight: 600;
}
.step-sub { margin: 0 0 1.4rem; color: var(--t-on-paper-mut); font-size: .97rem; }
@media (max-width: 600px) { .step-title { font-size: 1.3rem; } }

/* Current eligibility notice. A candidate who is over the work-permit ceiling should
   learn it BEFORE filling five steps, not from a validation error at the end, so it
   sits at the top of step 1. Amber rather than red: they are not doing anything
   wrong, and the roles being processed can change. */
.elig-note {
  display: flex; gap: .75rem; align-items: flex-start;
  margin: 0 0 1.5rem; padding: .95rem 1.1rem;
  background: #fdf6e8; border: 1px solid #e8d5a8; border-radius: var(--radius);
}
.elig-note svg { width: 20px; height: 20px; flex: none; color: var(--brass-ink); margin-top: .1rem; }
.elig-note b { display: block; color: var(--ink); font-size: .9rem; margin-bottom: .3rem; }
.elig-note p { margin: 0 0 .4rem; font-size: .85rem; line-height: 1.6; color: var(--t-on-paper-mut); }
.elig-note p:last-child { margin-bottom: 0; }
.elig-note p b { display: inline; color: var(--ink); }
/* The WhatsApp route out of the age notice has to be findable — a link that reads as
   body text is a dead end for the 42-44 candidate it exists for. */
.elig-note a { color: var(--brass-ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.elig-note a:hover { color: var(--ink); }
/* The 42-44 route is the one actionable thing in this box for the people it applies to,
   so it is separated by a rule and set in the same weight as the heading rather than
   trailing off as a third body paragraph. */
.elig-note .elig-alt {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid rgba(138, 93, 14, .22);
  font-weight: 600; color: var(--ink);
}

/* Error summary: a NAMED list of what is missing, grouped by step.
   The old summary said only "Please fix the 31 highlighted fields", and on a
   five-step form the offending field is usually on a step the candidate cannot
   see — so they re-checked the step in front of them, found nothing, and gave up.
   Every entry here is a button that opens its step and focuses the field. */
.form-error-summary .es-step { margin-top: .7rem; }
.form-error-summary .es-step-h {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brass-ink); margin-bottom: .25rem;
}
.form-error-summary ul { margin: 0; padding-left: 1.05rem; }
.form-error-summary li { margin: .12rem 0; }
.form-error-summary .es-jump {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: #b3402a; text-decoration: underline; text-underline-offset: 2px; text-align: left;
}
.form-error-summary .es-jump:hover { color: var(--ink); }
.form-error-summary .es-note { margin: .7rem 0 0; font-size: .86rem; }

/* The CV intro is instructions, not a caption. Centred it read as decorative and the
   photo rules inside it were being skimmed past; left-aligned at a readable measure
   it reads as something to follow. */
/* Specificity note: `.step-panel > .form-section > .hint` centres every step intro at
   (0,3,0), so a lone .cv-intro at (0,1,0) never took effect. Match that scope, and
   leave the other steps centred. */
/* Full section width, single column. A ch-based cap stopped the text at roughly
   half the section on desktop, leaving the right half empty — which read as a
   two-column layout rather than as one paragraph. It now runs the same width as
   the form fields below it. */
.step-panel > .form-section > .hint.cv-intro { text-align: left; max-width: none; margin-inline: 0; }