/* ==========================================================================
   CV BUILDER

   Two panes on a desktop - form on the left, an A4 page on the right - and
   one pane at a time on a phone, switched by the tabs.

   The preview is deliberately styled to look like paper rather than like the
   rest of the site: it is standing in for a document the reader is about to
   hand to an employer, so it borrows nothing from the page around it.

   Brand tokens come from critical.css. Anything defined here is either
   document typography, which the site has no equivalent of, or a fallback
   for when this file is loaded on its own in the preview harness.
   ========================================================================== */

.cv-wrap {
	--cv-ink: #1F2933;
	--cv-grey: #5C6B7A;
	--cv-rule: #C7D2DA;
	--cv-navy: var(--color-navy-900, #01224F);
	--cv-teal: var(--color-primary, #028B93);
	--cv-teal-ink: var(--color-primary-ink, #02737A);
	--cv-soft: var(--color-primary-soft, #E6F4F5);
	--cv-border: var(--color-border, #E2E8EC);
	--cv-radius: var(--radius-lg, 14px);
}

/* --- Choosing a type ------------------------------------------------------ */

.cv-chooser {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.cv-chooser__context {
	display: inline-block;
	margin-bottom: 18px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--cv-soft);
}
.cv-chooser__for {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cv-teal-ink);
}
.cv-chooser__opp {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--cv-navy);
}
.cv-chooser__title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--cv-navy);
}
.cv-chooser__intro {
	margin: 0 0 26px;
	font-size: 14px;
	color: var(--cv-grey);
}
.cv-chooser__grid {
	display: grid;
	gap: 16px;
	text-align: left;
}
@media (min-width: 720px) {
	.cv-chooser__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.cv-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	background: #fff;
}
.cv-choice.is-recommended {
	border-color: var(--cv-teal);
	box-shadow: 0 0 0 3px var(--cv-soft);
}
.cv-choice__flag {
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--cv-teal-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
.cv-choice__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 800;
	color: var(--cv-navy);
}
.cv-choice__blurb {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cv-grey);
}
.cv-choice__best {
	margin: 0 0 18px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--cv-ink);
}
.cv-choice .cv-btn { margin-top: auto; }

/* --- Shell ---------------------------------------------------------------- */

.cv-builder__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}
.cv-builder__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--cv-navy);
}
.cv-switch {
	padding: 7px 14px;
	border: 1px solid var(--cv-border);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--cv-teal-ink);
	cursor: pointer;
}
.cv-switch:hover { border-color: var(--cv-teal); }

/* --- Steps ---------------------------------------------------------------- */

.cv-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.cv-steps__step {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px 7px 7px;
	border-radius: 999px;
	cursor: pointer;
}
.cv-steps__step:hover { background: #F1F5F7; }
.cv-steps__step.is-on { background: var(--cv-soft); }
.cv-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--cv-border);
	background: #fff;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--cv-grey);
}
.cv-steps__step.is-on .cv-steps__num,
.cv-steps__step.is-done .cv-steps__num {
	border-color: var(--cv-teal);
	background: var(--cv-teal);
	color: #fff;
}
.cv-steps__label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cv-grey);
}
.cv-steps__step.is-on .cv-steps__label { color: var(--cv-navy); }

/* --- Panes ---------------------------------------------------------------- */

.cv-builder__panes {
	display: grid;
	gap: 20px;
	align-items: start;
}

/* The tabs sit above the panes and only exist on a narrow screen. Declared
   before the media queries that hide them: they carry the same specificity,
   so whichever comes last in the file wins, and this one losing is what put
   the preview on a second row of the grid. */
.cv-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	padding: 4px;
	border-radius: 999px;
	background: #F1F5F7;
}
.cv-tabs__tab {
	flex: 1;
	padding: 9px 14px;
	border: 0;
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--cv-grey);
	cursor: pointer;
}
.cv-tabs__tab.is-on {
	background: #fff;
	color: var(--cv-navy);
	box-shadow: 0 1px 3px rgba(1, 34, 79, .12);
}

@media (min-width: 1000px) {
	.cv-builder__panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

	/* Both panes are visible at this width, so the switch has nothing left
	   to do and must not be able to hide either of them. */
	.cv-tabs { display: none; }
	.cv-builder__panes.cv-mobile-edit .cv-builder__previewwrap,
	.cv-builder__panes.cv-mobile-preview .cv-builder__form { display: block; }
}

@media (max-width: 999px) {
	.cv-builder__panes.cv-mobile-edit .cv-builder__previewwrap { display: none; }
	.cv-builder__panes.cv-mobile-preview .cv-builder__form { display: none; }
}

.cv-builder__previewwrap {
	position: sticky;
	top: 16px;
}
.cv-builder__previewnote {
	margin: 0 0 8px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--cv-grey);
}

/* --- Form ----------------------------------------------------------------- */

.cv-section {
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cv-border);
}
.cv-section:last-child { border-bottom: 0; }
.cv-section__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: var(--cv-navy);
}
.cv-section__optional {
	margin: 2px 0 12px;
	font-size: 11.5px;
	color: var(--cv-grey);
}
.cv-section__hint {
	margin: 0 0 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cv-grey);
}

.cv-fields {
	display: grid;
	gap: 12px;
}
@media (min-width: 560px) {
	/* minmax(0, ...) rather than a bare 1fr: an input carries an intrinsic
	   min-content width, and a bare 1fr track refuses to shrink below it -
	   which pushes the whole form wider than its column. */
	.cv-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.cv-fields .cv-field--wide { grid-column: 1 / -1; }
}

.cv-field { display: block; }
.cv-field__label {
	display: block;
	margin-bottom: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cv-navy);
}
.cv-field__input {
	width: 100%;
	max-width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--cv-border);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	/* 16px on a phone, or iOS Safari zooms in on focus and never back out. */
	font-size: 16px;
	color: var(--cv-ink);
}
@media (min-width: 560px) {
	.cv-field__input { font-size: 14px; }
}
.cv-field__input:focus {
	outline: 2px solid var(--cv-teal);
	outline-offset: 1px;
	border-color: var(--cv-teal);
}
.cv-field__input--lines {
	min-height: 84px;
	resize: vertical;
	line-height: 1.5;
}
.cv-field__hint {
	margin: 4px 0 0;
	font-size: 11.5px;
	color: var(--cv-grey);
}
.cv-field--check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.cv-field--check label {
	font-size: 13px;
	color: var(--cv-ink);
}

/* --- Repeatable entries ---------------------------------------------------- */

.cv-entries { display: grid; gap: 10px; }

.cv-entry {
	border: 1px solid var(--cv-border);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.cv-entry.is-open { border-color: var(--cv-teal); }
.cv-entry__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 4px 4px 12px;
	background: #F7FAFB;
}
.cv-entry__toggle {
	flex: 1;
	min-width: 0;
	padding: 9px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cv-navy);
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}
.cv-entry__remove {
	flex: 0 0 auto;
	padding: 7px 11px;
	border: 0;
	border-radius: 7px;
	background: none;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #B03A57;
	cursor: pointer;
}
.cv-entry__remove:hover { background: #FCECEF; }
.cv-entry__body { display: grid; gap: 12px; }
.cv-entry.is-open .cv-entry__body { padding: 14px 12px; }

.cv-add {
	padding: 11px 16px;
	border: 1.5px dashed var(--cv-border);
	border-radius: 10px;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--cv-teal-ink);
	cursor: pointer;
}
.cv-add:hover {
	border-color: var(--cv-teal);
	background: var(--cv-soft);
}
.cv-add--inline {
	border-style: solid;
	white-space: nowrap;
}

/* --- Tags ------------------------------------------------------------------ */

.cv-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}
.cv-tags__list:empty { margin-bottom: 0; }
.cv-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--cv-border);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	color: var(--cv-ink);
}
.cv-tag button {
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	color: var(--cv-grey);
	cursor: pointer;
}
.cv-tag--suggest {
	cursor: pointer;
	color: var(--cv-teal-ink);
}
.cv-tag--suggest:hover {
	border-color: var(--cv-teal);
	background: var(--cv-soft);
}
.cv-tags__entry {
	display: flex;
	gap: 8px;
}
.cv-tags__suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}
.cv-tags__suggestlabel {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--cv-grey);
}

/* --- Buttons --------------------------------------------------------------- */

.cv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 20px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.cv-btn[disabled] { opacity: .6; cursor: default; }
.cv-btn--primary { background: var(--cv-teal-ink); color: #fff; }
.cv-btn--primary:hover:not([disabled]) { background: var(--cv-navy); }
.cv-btn--dark { background: var(--cv-navy); color: #fff; }
.cv-btn--dark:hover:not([disabled]) { background: #06305F; }
.cv-btn--ghost {
	border: 1px solid var(--cv-border);
	background: #fff;
	color: var(--cv-navy);
}
.cv-btn--link {
	padding: 11px 8px;
	background: none;
	color: var(--cv-grey);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cv-btn--wide { width: 100%; }

.cv-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--cv-border);
}
.cv-nav__right {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* --- Download -------------------------------------------------------------- */

.cv-done {
	padding: 22px;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	background: #fff;
	text-align: center;
}
.cv-done__title {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 800;
	color: var(--cv-navy);
}
.cv-done__intro {
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--cv-grey);
}
.cv-done__actions {
	display: grid;
	gap: 10px;
	margin-bottom: 12px;
}
@media (min-width: 520px) {
	.cv-done__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.cv-done__status {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
}
.cv-done__status.is-bad { background: #FCECEF; color: #8E2A42; }
.cv-done__filename {
	margin: 0 0 16px;
	font-size: 11.5px;
	color: var(--cv-grey);
}
.cv-done__filename code {
	padding: 2px 5px;
	border-radius: 4px;
	background: #F1F5F7;
	font-size: 11px;
}
.cv-done__apply {
	display: block;
	margin-top: 14px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--cv-teal-ink);
}

/* --- Storage --------------------------------------------------------------- */

.cv-storage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: var(--cv-radius);
	background: #F7FAFB;
}
.cv-storage__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--cv-navy);
}
.cv-storage__note {
	flex: 1 1 260px;
	margin: 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--cv-grey);
}
.cv-storage--off {
	display: block;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--cv-grey);
}
.cv-storage__clear { flex: 0 0 auto; }


/* Carlito is what the PDF embeds and is metric-compatible with the Calibri
   the Word file asks for. Served here so the preview wraps identically on a
   machine that has neither - a Mac, or a Linux desktop. */
@font-face {
	font-family: "Carlito";
	src: url("../vendor/carlito/sub-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Carlito";
	src: url("../vendor/carlito/sub-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Carlito";
	src: url("../vendor/carlito/sub-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   THE PAGE

   A4 proportions, document typography, and nothing of the site's own styling
   - this is standing in for the file the reader is about to download.
   ========================================================================== */

.cv-page {
	width: 100%;
	/* A4 at 96dpi. These match assets/js/cv-metrics.js, which is where the
	   exporters read the same figures from - CSS cannot read that file, so
	   the numbers are repeated here and nowhere else. */
	/* max-width: 794px; */
	margin: 0 auto;
	border: 1px solid var(--cv-border);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(1, 34, 79, .09);
	overflow: hidden;
}
.cv-page__body {
	/* 16mm, the page margin both exports use. */
	padding: 60.47px;

	/* Calibri is what the Word file asks for; Carlito is metric-compatible
	   with it and is what the PDF embeds. Either gives the same line breaks,
	   so the preview wraps where the downloads wrap. */
	font-family: Carlito, Calibri, "Segoe UI", Roboto, sans-serif;

	/* 9.5pt and Carlito's natural line height, which is also Word's single
	   spacing - see cv-metrics.js. */
	font-size: 12.67px;
	line-height: 1.2207;
	color: var(--cv-ink);
}
@media (max-width: 560px) {
	/* Below this the page is scaled down to fit rather than re-flowed: a
	   preview that wraps differently from the file it is previewing is
	   worse than a small one. */
	.cv-page__body { padding: 30px; font-size: 11px; }
}
.cv-page__empty {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cv-grey);
}

/* Type sizes and spacing below are assets/js/cv-metrics.js converted from
   points to pixels at 96dpi. The exporters read the point values from that
   file; CSS cannot, so they are restated once here. Change them there. */

.cv-name {
	margin: 0 0 2.67px;
	font-size: 26.67px;   /* 20pt */
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--cv-navy);
}
.cv-title {
	margin: 0 0 4px;
	font-size: 14.67px;   /* 11pt */
	color: var(--cv-grey);
}
.cv-contact {
	margin: 0 0 2px;
	font-size: 12px;      /* 9pt */
	color: var(--cv-grey);
}
.cv-contact a { color: var(--cv-navy); }

.cv-heading {
	margin: 16px 0 4px;   /* 12pt before, 3pt after */
	padding-bottom: 2.67px;
	border-bottom: 1px solid var(--cv-rule);
	font-size: 14px;      /* 10.5pt */
	font-weight: 700;
	letter-spacing: 0.0571em;   /* 0.6pt, matching TRACKING.heading */
	text-transform: uppercase;
	color: var(--cv-navy);
	/* Section 29: a heading must not be left alone at the foot of a page.
	   This governs the browser's own print output; the PDF and Word files
	   enforce the same rule in their own engines. */
	break-after: avoid;
	page-break-after: avoid;
}
.cv-subhead {
	margin: 6.67px 0 1.33px;
	font-size: 14px;      /* 10.5pt */
	font-weight: 700;
	color: var(--cv-ink);
	break-after: avoid;
	page-break-after: avoid;
}
.cv-meta {
	margin: 0 0 2.67px;
	font-size: 12px;      /* 9pt */
	font-style: italic;
	color: var(--cv-grey);
}
.cv-bullets {
	margin: 0 0 1.33px;
	/* 9.361pt: the width of "9. " in Carlito at 9.5pt, which is the gutter
	   pdfmake puts a marker in. The Word list uses the same figure, so the
	   bullets line up in all three. See BULLET.gutterEm in cv-metrics.js. */
	padding-left: 12.48px;
}
.cv-bullets li {
	/* Nothing between items: the line height separates them, and both
	   exports space the list as a whole rather than each item. See
	   SPACE.bulletItem in cv-metrics.js. */
	margin-bottom: 0;
	break-inside: avoid;
	page-break-inside: avoid;
}
.cv-para {
	margin: 0 0 2.67px;
}
.cv-para a { color: var(--cv-navy); }
.cv-inline {
	margin: 0 0 2.67px;
}

/* The first line of an entry stays with the rest of it. */
.cv-entry-start {
	break-before: auto;
	page-break-inside: avoid;
	break-inside: avoid;
}

/* Where a page is likely to end. Approximate by nature - see cv-preview.js. */
.cv-pagebreak {
	position: relative;
	height: 0;
	margin: 20px 0;
	border-top: 1px dashed var(--cv-rule);
}
.cv-pagebreak::after {
	content: attr(data-page);
	position: absolute;
	top: -7px;
	right: 0;
	padding: 0 6px;
	background: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cv-grey);
}

@media print {
	.cv-pagebreak { display: none; }
	.cv-page { border: 0; box-shadow: none; }
}

/* ==========================================================================
   THE BUILDER'S PAGE

   Only the furniture around the mount. The homepage section and the
   opportunity card that open the builder live in home.css and single.css,
   because this file is loaded on the builder's page alone.
   ========================================================================== */

.cv-page__head {
	max-width: 720px;
	margin: 0 auto 26px;
	text-align: center;
}
.cv-page__title {
	margin: 0 0 8px;
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cv-navy);
}
.cv-page__lead {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cv-grey);
}
.cv-page__points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cv-page__points li {
	display: flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--cv-soft);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cv-teal-ink);
}
.cv-page__noscript {
	max-width: 620px;
	margin: 0 auto;
	padding: 20px 22px;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius);
	background: #fff;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cv-grey);
	text-align: center;
}