/* Creation Dynamix CV Builder, the questionnaire's look.
   Taken from services/cv-intake/index.html, its style block, lines 12 to 1057.
   Every rule is scoped to the builder section. No rule selects a bare element
   that could reach the CV preview, which stays under styles.css until chunk 7.
   The design screen's pictures, M6 part six, are styled at the end of this file.
   styles.css is not changed by this file. */

/* Self hosted brand fonts, the four files on the server since M1. */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-var-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  src: url('fonts/dm-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  src: url('fonts/dm-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens, prefixed so no name in styles.css is redefined. */
.builder {
  --cd-bg: #0b0c0c;
  --cd-surface: #131616;
  --cd-surface-alt: #191d1c;
  --cd-border: #6b716e;
  --cd-text: #f1eee7;
  --cd-muted: #a6aaa6;
  --cd-accent: #ff8434;
  --cd-accent-text: #0b0c0c;
  --cd-error: #ef3c24;
  --cd-cyan: #25c6d8;
  --cd-gold: #f4c94e;
  --cd-rule: #292d2c;
  --cd-focus: rgba(255, 132, 52, 0.22);
  --cd-sans: Manrope, Arial, sans-serif;
  --cd-mono: 'DM Mono', ui-monospace, monospace;
  --cd-radius: 8px;
  background: var(--cd-bg);
  color: var(--cd-text);
  color-scheme: dark;
}
body:has(#builder:not([hidden])) { background: #0b0c0c; }
.builder .cv-preview-wrap { color-scheme: light; }

/* ---------- The rail ---------- */
.builder .journey-panel { background: var(--cd-bg); border-right: 1px solid var(--cd-rule); }
.builder .journey-panel .eyebrow { font: 400 10px/1.2 var(--cd-mono); letter-spacing: 0.18em; color: var(--cd-muted); }
.builder .progress-track { height: 2px; border-radius: 0; background: var(--cd-rule); }
.builder .progress-track span { border-radius: 0; background: var(--cd-accent); }
.builder #progressText { font: 400 11px var(--cd-mono); letter-spacing: 0.08em; color: var(--cd-muted); }
.builder .phase-list span { border-radius: var(--cd-radius); color: var(--cd-muted); font-family: var(--cd-sans); }
.builder .phase-list span.active { color: var(--cd-text); background: var(--cd-surface); border-left-color: var(--cd-accent); }
.builder .privacy-note { background: var(--cd-surface); border: 1px solid var(--cd-rule); border-radius: var(--cd-radius); }
.builder .privacy-note strong { color: var(--cd-text); }
.builder .privacy-note p { color: var(--cd-muted); }

/* ---------- The mobile bar ---------- */
.builder .mobile-progress { font: 500 10px var(--cd-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cd-muted); padding-bottom: 10px; border-bottom: 1px solid var(--cd-rule); }
.builder #mobileProgressText { color: var(--cd-text); }

/* ---------- The card ---------- */
.builder .question-card { background: var(--cd-surface); border: 1px solid var(--cd-rule); border-radius: var(--cd-radius); box-shadow: none; color: var(--cd-text); font-family: var(--cd-sans); }
.builder .step-kicker { display: flex; align-items: center; gap: 12px; font: 400 11px/1.2 var(--cd-mono); letter-spacing: 0.18em; color: var(--cd-muted); }
.builder .step-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cd-accent); flex: 0 0 auto; }
.builder #stepContent > h1 { color: var(--cd-text); font-weight: 500; font-size: clamp(28px, 5vw, 44px); line-height: 1.05; letter-spacing: -0.05em; margin: 16px 0 12px; }
.builder #stepContent > .lead { color: var(--cd-muted); font-size: 15px; line-height: 1.65; margin: 0 0 28px; }

/* ---------- Fields. Label, then help, then the input, as cv-intake orders them. ---------- */
.builder .field > * { order: 4; }
.builder .field > label, .builder .field > legend { order: 1; }
.builder .field > small { order: 2; }
.builder .field > input, .builder .field > select, .builder .field > textarea { order: 3; }
.builder .field { gap: 8px; margin: 0 0 28px; }
.builder .field label, .builder .field legend { font: 500 10px/1.5 var(--cd-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cd-muted); }
.builder .field small, .builder .helper { font-size: 13px; line-height: 1.6; color: var(--cd-muted); }
.builder .field input:not([type="checkbox"]):not([type="radio"]),
.builder .field select,
.builder .field textarea {
  min-height: 50px;
  background-color: var(--cd-surface-alt);
  border: 1px solid var(--cd-border);
  border-radius: var(--cd-radius);
  color: var(--cd-text);
  font-family: var(--cd-sans);
  font-size: 17px;
  line-height: 1.5;
  padding: 14px 15px;
}
.builder .field textarea { min-height: 140px; }
.builder .field input::placeholder, .builder .field textarea::placeholder { color: var(--cd-muted); }
.builder .field input:focus, .builder .field select:focus, .builder .field textarea:focus { border-color: var(--cd-accent); box-shadow: 0 0 0 3px var(--cd-focus); outline: none; }
.builder .field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cd-muted) 50%), linear-gradient(135deg, var(--cd-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 23px, calc(100% - 13px) 23px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.builder .field select option { background: var(--cd-surface-alt); color: var(--cd-text); }
.builder .field-row { gap: 0 26px; }

/* ---------- Choices, as cv-intake's route cards. The native input stays visible. ---------- */
.builder .choice, .builder .cv-option { background: var(--cd-surface-alt); border: 1px solid var(--cd-border); border-radius: var(--cd-radius); color: var(--cd-text); }
.builder .choice:hover, .builder .cv-option:hover { border-color: var(--cd-muted); background: var(--cd-surface-alt); }
.builder .choice:has(input:checked), .builder .cv-option:has(input:checked) { border-color: var(--cd-accent); background: var(--cd-surface-alt); box-shadow: 0 0 0 3px var(--cd-focus); }
.builder .choice input, .builder .cv-option input, .builder .tag input { accent-color: var(--cd-accent); }
.builder .choice strong, .builder .design-choice strong { color: var(--cd-text); font-weight: 600; }
.builder .choice span span, .builder .design-choice small { color: var(--cd-muted); }
.builder .choice.danger, .builder .choice.danger strong { color: var(--cd-error); }

/* ---------- Skills, as cv-intake's pills ---------- */
.builder .tag { min-height: 44px; padding: 10px 18px; background: transparent; border: 1px solid var(--cd-border); border-radius: 100px; color: var(--cd-text); font-size: 14px; }
.builder .tag:hover { border-color: var(--cd-muted); }
.builder .tag:has(input:checked) { background: var(--cd-accent); border-color: var(--cd-accent); color: var(--cd-accent-text); }
.builder .tag:has(input:checked) input { accent-color: var(--cd-accent-text); }

/* ---------- Buttons ---------- */
.builder .step-actions .primary-button {
  width: 100%;
  justify-content: space-between;
  gap: 20px;
  min-height: 58px;
  padding: 21px 22px;
  background: var(--cd-accent);
  border: 1px solid var(--cd-accent);
  border-radius: var(--cd-radius);
  box-shadow: none;
  color: var(--cd-accent-text);
  font: 500 12px var(--cd-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: none;
}
.builder .step-actions .primary-button:hover { background: var(--cd-accent); border-color: var(--cd-text); transform: none; }
.builder .step-actions .primary-button:disabled { background: var(--cd-surface-alt); border-color: var(--cd-border); color: var(--cd-muted); }
.builder .back-button { font: 500 11px var(--cd-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cd-muted); }
.builder .back-button:hover { color: var(--cd-accent); }
/* Launch day, the live test: actions such as Tidy my wording looked like faint labels. They are real buttons now. */
.builder .text-button { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 8px 8px 0; padding: 10px 18px; font: 600 14px/1.2 var(--cd-sans); letter-spacing: 0; text-transform: none; color: var(--cd-accent); background: transparent; border: 1px solid var(--cd-accent); border-radius: var(--cd-radius); cursor: pointer; }
.builder .text-button:hover { background: var(--cd-accent); color: var(--cd-accent-text); }
.builder .text-button { width: auto; justify-self: start; align-self: flex-start; }
.builder .text-button[data-action^="remove-"] { color: var(--cd-muted); border-color: var(--cd-border); }
.builder .text-button[data-action^="remove-"]:hover { color: var(--cd-text); background: transparent; border-color: var(--cd-text); }
.builder .voice-button { font: 500 11px var(--cd-mono); text-transform: uppercase; letter-spacing: 0.08em; background: transparent; border: 1px solid var(--cd-border); border-radius: var(--cd-radius); color: var(--cd-text); }
.builder .voice-button:hover { border-color: var(--cd-accent); color: var(--cd-accent); }
.builder .voice-button.recording { background: var(--cd-error); border-color: var(--cd-error); color: var(--cd-text); }
.builder .voice-status { color: var(--cd-muted); }
.builder .download-grid button, .builder .download-grid a { background: transparent; border: 1px solid var(--cd-border); border-radius: var(--cd-radius); color: var(--cd-text); font: 500 11px var(--cd-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.builder .download-grid button:hover, .builder .download-grid a:hover { border-color: var(--cd-accent); color: var(--cd-accent); }

/* ---------- Boxes and messages ---------- */
.builder .info-box, .builder .warning-box, .builder .confirmed-box { background: var(--cd-surface-alt); border-radius: var(--cd-radius); color: var(--cd-text); font-size: 14px; line-height: 1.6; }
.builder .info-box { border: 1px solid var(--cd-border); }
.builder .confirmed-box { border: 1px solid var(--cd-cyan); }
.builder .warning-box { border: 1px solid var(--cd-gold); }
.builder .confirmed-box hr { border-top-color: var(--cd-rule); }
.builder .form-error { background: var(--cd-surface); border: 1px solid var(--cd-error); border-radius: var(--cd-radius); color: var(--cd-error); }
.builder .form-notice { background: var(--cd-surface); border: 1px solid var(--cd-cyan); border-radius: var(--cd-radius); color: var(--cd-text); }
.builder .payment-box, .builder .account-box { background: var(--cd-surface-alt); border: 1px solid var(--cd-border); border-radius: var(--cd-radius); color: var(--cd-text); padding: 22px; margin-top: 22px; }
.builder .payment-box .price { color: var(--cd-text); font-weight: 600; }

/* ---------- Choices inside a field, M6 part three: education status and matric ---------- */
.builder fieldset.field { border: 0; padding: 0; min-width: 0; }
.builder fieldset.field legend { padding: 0; margin-bottom: 8px; }
.builder .field .choice-grid { margin: 0; }
.builder .field label.choice { font: inherit; font-size: 15px; text-transform: none; letter-spacing: normal; color: var(--cd-text); align-items: center; }

/* ---------- Focus, as cv-intake ---------- */
.builder a:focus-visible, .builder button:focus-visible, .builder input:focus-visible, .builder select:focus-visible, .builder textarea:focus-visible { outline: 3px solid var(--cd-accent); outline-offset: 3px; }

@media (max-width: 620px) {
  .builder .question-card { padding: 24px 17px; border-radius: var(--cd-radius); }
  .builder #stepContent > h1 { font-size: 30px; }
}

/* ---------- The design screen, M6 part six: pictures of the real designs ---------- */
.builder .design-group { font: 500 10px/1.5 var(--cd-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cd-muted); margin: 28px 0 12px; }
.builder .design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0 0 8px; }
.builder .design-card { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: var(--cd-surface-alt); border: 1px solid var(--cd-border); border-radius: var(--cd-radius); color: var(--cd-text); cursor: pointer; }
.builder .design-card:hover { border-color: var(--cd-muted); }
.builder .design-card:has(input:checked) { border-color: var(--cd-accent); box-shadow: 0 0 0 3px var(--cd-focus); }
.builder .design-card img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 1131; background: #fff; border-radius: 4px; }
.builder .design-card.locked { cursor: default; }
.builder .design-card.locked:hover { border-color: var(--cd-border); }
.builder .design-card.locked img { opacity: 0.45; }
.builder .design-larger { align-self: flex-start; font: 500 11px var(--cd-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cd-muted); }
.builder .design-larger:hover { color: var(--cd-accent); }
.builder .design-card .design-choice input { accent-color: var(--cd-accent); flex: 0 0 auto; }
.builder .design-card .design-lock { color: var(--cd-gold); }
.builder .design-group + .text-button { margin: 0 0 14px; }

/* ---------- Matric subjects, M6 part seven: subject and result side by side, also on a phone ---------- */
.builder .subject-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 12px; }
.builder .subject-row .field { margin-bottom: 14px; }

/* ---------- The CV in its design, chunk 7 part two: a frame drawn by design.html ---------- */
.builder .design-preview { padding: 0; overflow: hidden; background: #e5eaed; }
.builder .design-frame { display: block; width: 100%; height: 70vh; border: 0; background: #e5eaed; }
.builder .design-full { margin: 10px 0 0; }
.builder .download-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .builder .download-grid { grid-template-columns: 1fr; } }

/* ---------- Both lengths, and what the one page CV leaves out, chunk 7 part three ---------- */
.builder .length-switch { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; }
.builder .length-switch .length-button[aria-pressed="true"] { color: var(--cd-accent); text-decoration: underline; text-underline-offset: 3px; }
.builder .fit-note { margin: 14px 0 0; }
.builder .fit-note ul { margin: 8px 0 10px 18px; padding: 0; }
.builder .fit-note li { margin: 0 0 4px; }
.builder .fit-note p { margin: 8px 0 0; }
.builder .fit-notice { margin: 0 0 14px; }

/* ---------- The review before payment, chunk 7 part five ---------- */
.builder .review-rule { margin: 0 0 18px; }
.builder .review-count { font: 500 11px var(--cd-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cd-muted); margin: 0 0 12px; }
.builder .review-part { margin: 0 0 16px; padding: 18px; }
.builder .review-part h2 { font: 600 17px/1.3 var(--cd-sans); color: var(--cd-text); margin: 0 0 4px; }
.builder .review-state { font: 500 10px var(--cd-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cd-gold); }
.builder .review-part.confirmed-box .review-state { color: var(--cd-cyan); }
.builder .review-lines { margin: 12px 0 14px; }
.builder .review-lines p { margin: 0 0 6px; overflow-wrap: anywhere; }
.builder .review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.builder .review-confirm { min-height: 44px; padding: 10px 18px; background: var(--cd-accent); border: 1px solid var(--cd-accent); border-radius: var(--cd-radius); color: var(--cd-accent-text); font: 500 11px var(--cd-mono); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.builder .review-confirm:hover { border-color: var(--cd-text); }
.builder .review-confirm:disabled { background: var(--cd-surface-alt); border-color: var(--cd-border); color: var(--cd-muted); cursor: default; }
.builder .review-edit .field textarea { min-height: 96px; }
.builder .review-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 15px; color: var(--cd-text); text-transform: none; letter-spacing: normal; }
.builder .review-check input { accent-color: var(--cd-accent); margin-top: 4px; flex: 0 0 auto; }
.builder .review-spelling { margin: 0 0 16px; }
.builder .review-spelling .spell-item { margin: 10px 0 0; }
.builder .unit-question { margin: 4px 0 0; }
.builder .review-measure { position: absolute; left: -10000px; top: 0; width: 900px; height: 600px; border: 0; }