/* FIRSTJOBZ CV Builder - builder layout, the three CV templates and the print sheet. */

/* ---- landing ---- */
.cv-main .feed-lede,.cv-main .feed-prose{max-width:none}
.cv-main .pro-card .pro-cta{margin-top:4px}

/* ---- builder frame (phones first) ---- */
/* Once the builder is open, give it the full content frame with a single side gutter, then cap it at
   a sensible reading width so the two columns stay comfortable on a very wide monitor. The marketing
   landing is hidden by then, so this only affects the builder. The bare `section` rule caps every
   section at 1120px, which is what squeezed the 9-step strip onto two lines, so the mounted builder
   panel is lifted out of that cap here and centred. */
html.cv-member .feed-main{max-width:none}
html.cv-member #cvApp{max-width:1500px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.cv-app{margin:0 0 40px}
/* Step strip (1..9) and the CV / Cover letter document toggle sit on ONE line from 1200px up. Below
   that the steps wrap to a second line rather than scroll or clip; on a phone they wrap freely. */
.cv-topstrip{display:flex;align-items:center;gap:10px 14px}
.cv-topstrip .cv-steps{flex:0 1 auto;min-width:0}
.cv-topstrip .cv-preview-bar{flex:none;margin:0}
.cv-topstrip .cv-step{padding:8px 12px;min-height:42px}
.cv-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0 0 10px}
.cv-bar-title{font-family:var(--font-sans);font-weight:400;font-size:clamp(26px,4vw,38px);line-height:1.1;margin:0}
.cv-status{min-height:18px;margin:0;font-size:13px;color:var(--ink-soft)}
.cv-steps{display:flex;flex-wrap:wrap;gap:8px;padding:4px 2px 12px}
.cv-step{flex:none}
.cv-cols{display:block;position:relative}
.cv-editor{min-width:0;padding-bottom:24px}
/* On a phone the preview is laid out but kept out of sight, so the one-page check can still measure it. */
.cv-preview{position:absolute;left:0;right:0;top:0;height:0;overflow:hidden;visibility:hidden;min-width:0}
.cv-show-preview .cv-editor{display:none}
.cv-show-preview .cv-preview{position:static;height:auto;overflow:visible;visibility:visible}
.cv-mobilebar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px -22px 0;padding:10px 22px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:2px solid var(--ink)}
.cv-mobilebar .cv-btn{flex:1 1 160px}
.cv-fit-wide{display:none}

/* ---- controls ---- */
.cv-btn{display:inline-block;min-height:44px;padding:10px 16px;border:2px solid var(--ink);border-radius:12px;background:var(--hl);color:var(--ink);font-family:var(--font-sans);font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;box-shadow:2px 3px 0 var(--ink)}
.cv-btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.cv-btn:focus-visible,.cv-input:focus-visible,.cv-bank summary:focus-visible,.cv-bank-group summary:focus-visible,.cv-radio input:focus-visible,.cv-check input:focus-visible,.cv-file-input:focus-visible + .cv-file{outline:3px solid var(--ink);outline-offset:2px}
/* The step heading takes programmatic focus on step change for screen readers, so it must never draw a keyboard-focus ring that makes it read as a text field. */
.cv-step-h:focus{outline:none}
.cv-btn-quiet,.cv-step,.cv-file{background:var(--card);box-shadow:none}
.cv-btn-small{min-height:40px;padding:8px 12px;font-size:15px;background:var(--card);box-shadow:none}
.cv-btn-icon{min-height:44px;min-width:44px;padding:8px 10px;font-size:13px;font-weight:600;background:var(--card);border-width:1.5px;box-shadow:none}
.cv-btn-danger{background:var(--urgent);color:#fff}
.cv-step-on,.cv-on{background:var(--ink);color:var(--paper)}
.cv-chip{min-height:40px;padding:7px 12px;border-width:1.5px;border-radius:999px;font-size:14px;font-weight:600;background:var(--card);box-shadow:none}
.cv-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.cv-pager{justify-content:space-between;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.cv-confirm{display:inline-flex;flex-wrap:wrap;gap:8px}
.cv-field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;min-width:0;flex:1 1 220px}
.cv-field label,.cv-set legend,.cv-card legend{font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--ink)}
.cv-input{width:100%;box-sizing:border-box;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--card);color:var(--ink);font-family:inherit;font-size:17px;line-height:1.4}
textarea.cv-input{resize:vertical}
.cv-help,.cv-note{margin:0 0 12px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.cv-help{margin:0}
.cv-promise{padding:12px 14px;border:1.5px solid var(--cat-store);border-radius:12px;background:var(--hl-soft);color:var(--ink)}
.cv-nudge{padding:10px 12px;border-left:4px solid var(--cat-temp);background:var(--card);color:var(--ink)}
.cv-fix{color:#8a1a1a}
.cv-tip{color:var(--ink-soft)}
.cv-ok{color:#14603a}
.cv-step-h{font-family:var(--font-sans);font-weight:400;font-size:clamp(24px,3.6vw,32px);line-height:1.15;margin:6px 0 12px}
.cv-editor h4{font-family:var(--font-sans);font-size:17px;font-weight:700;margin:18px 0 8px}
.cv-set,.cv-card{margin:0 0 16px;padding:14px 16px 6px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);min-width:0}
.cv-card{display:flex;flex-wrap:wrap;gap:0 14px}
.cv-card .cv-lines,.cv-card .cv-row,.cv-card .cv-bank,.cv-card .cv-wide{flex:1 1 100%}
.cv-radio,.cv-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:16px;line-height:1.45}
.cv-radio input,.cv-check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink)}
.cv-box{margin:18px 0;padding:14px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--card)}
.cv-box h4{margin-top:0}
.cv-line{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 6px}
.cv-line .cv-field{margin:0;flex:1 1 100%}
.cv-bank,.cv-bank-group{margin:12px 0;border:1.5px solid var(--line);border-radius:14px;background:var(--paper)}
.cv-bank summary,.cv-bank-group summary{padding:12px 14px;font-weight:700;cursor:pointer;min-height:20px}
.cv-bank > *:not(summary),.cv-bank-group > *:not(summary){margin-left:14px;margin-right:14px}
.cv-bank-item,.cv-rewrite{padding:10px 0 12px;border-top:1px solid var(--line)}
.cv-bank-item p,.cv-rewrite p{margin:0 0 8px;font-size:16px;line-height:1.5;color:var(--ink)}
.cv-bank-for{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cv-before{color:var(--ink-soft)}
.cv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.cv-meter{width:100%;height:18px;margin-top:8px;accent-color:var(--ink)}
.cv-copybox{margin-top:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.cv-offscreen,.cv-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- preview ---- */
.cv-preview-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 12px}
.cv-preview-bar .cv-row{margin:0}
.cv-fit{margin:0;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700}
.cv-fit-ok{background:#E7F6EC;color:#14603a}
.cv-fit-over{background:#FFE9E9;color:#8a1a1a}
.cv-sheet-wrap{height:var(--cv-h,auto);overflow:hidden}

/* ---- the page: one column, real text, standard headings ---- */
.cv-page{width:210mm;min-height:297mm;box-sizing:border-box;background:#fff;color:#000;text-align:left;box-shadow:0 1px 3px rgba(20,19,16,.2),0 18px 40px -24px rgba(20,19,16,.45);transform:scale(var(--cv-scale,1));transform-origin:top left}
.cv-page.cv-over{background-image:linear-gradient(to bottom,transparent calc(297mm - 2px),#DC2B2B calc(297mm - 2px),#DC2B2B 297mm,transparent 297mm);background-size:100% 297mm;background-repeat:repeat-y}
.cv-t-classic{padding:20mm;font-family:Georgia,"Times New Roman",Times,serif;font-size:10.5pt;line-height:1.35}
.cv-t-modern{padding:18mm;font-family:Arial,Helvetica,sans-serif;font-size:10.5pt;line-height:1.35}
.cv-t-compact{padding:14mm;font-family:Calibri,Carlito,"Helvetica Neue",Arial,sans-serif;font-size:10pt;line-height:1.25}
.cv-sheet{display:flow-root;overflow-wrap:anywhere}
.cv-sheet p,.cv-sheet h3,.cv-sheet ul,.cv-sheet li{margin:0;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:#000;letter-spacing:0}
.cv-sheet .cv-name{font-weight:700;font-size:20pt;line-height:1.2;margin-bottom:2pt}
.cv-t-modern .cv-sheet .cv-name{font-size:22pt}
.cv-t-compact .cv-sheet .cv-name{font-size:18pt}
.cv-sheet .cv-contact{font-size:10pt;margin-bottom:6pt}
.cv-t-compact .cv-sheet .cv-contact{font-size:9.5pt}
.cv-t-classic .cv-name,.cv-t-classic .cv-contact{text-align:center}
.cv-sheet .cv-h{margin:10pt 0 4pt;padding-bottom:1pt;border-bottom:.75pt solid #000;font-size:12pt;font-weight:700;line-height:1.25;text-transform:uppercase;break-after:avoid}
.cv-t-modern .cv-sheet .cv-h{font-size:11.5pt;border-bottom:0}
.cv-t-compact .cv-sheet .cv-h{font-size:11pt}
.cv-sheet .cv-entry{display:flex;justify-content:space-between;gap:12pt;margin-top:5pt;break-after:avoid}
.cv-sheet .cv-entry-l{font-weight:700}
.cv-sheet .cv-entry-r{flex:none;white-space:nowrap}
.cv-sheet .cv-ul{padding-left:14pt;list-style:disc}
.cv-sheet .cv-ul li{margin-bottom:1pt;break-inside:avoid}
.cv-sheet .cv-p{margin-bottom:3pt;white-space:pre-line}
.cv-sheet .cv-b{font-weight:700}
.cv-is-letter .cv-sheet .cv-p{margin-bottom:9pt}

/* From 1200px the strip has room for all nine steps plus the document toggle on one line. */
@media (min-width:1200px){
  .cv-steps{flex-wrap:nowrap;gap:6px}
}

@media (min-width:960px){
  .cv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .cv-show-preview .cv-editor{display:block}
  .cv-editor{padding-bottom:0}
  .cv-preview,.cv-show-preview .cv-preview{position:sticky;top:64px;height:auto;max-height:calc(100vh - 80px);overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain;visibility:visible}
  .cv-mobilebar{display:none}
  .cv-fit-wide{display:block}
}

/* ---- print: once the builder is open, the page being previewed and nothing else ---- */
@media print{
  @page{size:A4;margin:0}
  body::after{display:none}
  html:not(.cv-member) body{padding:14mm 16mm}
  html.cv-member,html.cv-member.menu-lock{overflow:visible}
  html.cv-member body{background:#fff}
  html.cv-member .topbar,html.cv-member .cover,html.cv-member footer,html.cv-member #cvLanding,html.cv-member .cv-bar,html.cv-member .cv-steps,html.cv-member .cv-editor,html.cv-member .cv-preview-bar,html.cv-member .cv-mobilebar{display:none}
  html.cv-member .feed-main{max-width:none;margin:0;padding:0}
  html.cv-member .cv-app{margin:0}
  html.cv-member .cv-cols{display:block;position:static}
  html.cv-member .cv-preview,html.cv-member .cv-show-preview .cv-preview{display:block;position:static;height:auto;max-height:none;overflow:visible;visibility:visible}
  html.cv-member .cv-sheet-wrap{height:auto;overflow:visible}
  html.cv-member .cv-page{width:auto;min-height:0;transform:none;box-shadow:none;background-image:none}
  html.cv-print-slim .cv-page{padding:10mm}
}