/* cvGO design system.
   Three color roles carry meaning everywhere:
   green = the user and their CV (primary actions, accepted content, progress)
   violet = the assistant's suggestions (AI actions, suggestion panels, AI status)
   brick red = shortcut helpers that speed up building (browse the job catalog) */

:root {
  --color-bg: #f2f5f3;
  --color-surface: #ffffff;
  --color-text: #182420;
  --color-muted: #566661;
  --color-border: #d7ded9;
  --color-primary: #0c7a4d;
  --color-primary-strong: #085c3a;
  --color-primary-soft: #e7f3ec;
  --color-ai: #5a4fb5;
  --color-ai-strong: #473d99;
  --color-ai-surface: #f4f2fc;
  --color-ai-border: #cdc7ec;
  --color-accent: #c4523e;
  --color-accent-strong: #a83f2e;
  --color-attention: #9a6b00;
  --color-attention-soft: #fdf4e0;
  --color-error: #b3261e;
  --color-error-soft: #fdefee;

  --font-display: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, ui-sans-serif, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --focus-column: 680px;
  --preview-rail: 400px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 20px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.55;
  /* Sticky footer: on short screens the footer sits at the bottom of the
     viewport instead of floating mid-page. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Focus and accessibility ---------- */

:focus-visible {
  outline: 3px solid var(--color-ai);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  color: var(--color-primary-strong);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-3);
}

/* ---------- Single app header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-5);
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.wordmark img {
  height: 36px;
  width: auto;
}

.header-status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-muted);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-status .ai-state {
  color: var(--color-ai-strong);
  font-weight: 600;
}

.header-status .ai-state.ready::before {
  content: "● ";
  color: var(--color-primary);
}

.header-status a {
  color: var(--color-primary-strong);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.header-status a:hover {
  text-decoration: underline;
}

.lang-switcher {
  display: inline-flex;
  gap: 2px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
}

.lang-switcher a,
.lang-switcher button {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-muted);
  background: none;
  border: none;
  border-radius: calc(var(--radius-md) - 3px);
  padding: 6px 12px;
  min-height: 40px;
  min-width: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang-switcher a:hover,
.lang-switcher button:hover {
  color: var(--color-text);
  text-decoration: none;
}

.lang-switcher a.active,
.lang-switcher button.active {
  background: var(--color-primary);
  color: #ffffff;
}

.site-nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--color-primary-strong);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* ---------- Progress: a sentence plus seven segments ---------- */

.progress-area {
  max-width: var(--focus-column);
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-4);
}

.progress-sentence {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
}

.progress-sentence strong {
  color: var(--color-text);
}

.stepper {
  display: flex;
  gap: var(--space-1);
}

.stepper-item {
  flex: 1;
  height: 10px;
  min-height: 10px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: var(--color-border);
  cursor: pointer;
}

.stepper-item.complete {
  background: var(--color-primary);
}

.stepper-item.current {
  background: linear-gradient(90deg, var(--color-primary) 55%, var(--color-border) 55%);
}

.stepper-item:hover {
  outline: 2px solid var(--color-primary-soft);
}

/* ---------- Workspace: focus column plus paper rail ---------- */

.workspace {
  display: block;
  max-width: var(--focus-column);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-7);
}

.wizard-panel {
  min-width: 0;
}

@media (min-width: 1100px) {
  .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--preview-rail);
    gap: var(--space-6);
    max-width: calc(var(--focus-column) + var(--preview-rail) + 96px);
  }
}

/* ---------- Wizard card: one big question ---------- */

.wizard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  animation: card-in 0.18s ease-out;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.wizard-card h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

/* The stage marker beside each wizard title. Green: building the CV is always
   the user's own (green) work, whichever stage they are in. */
.wizard-card h2 .icon {
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  background-color: var(--color-primary);
}

.wizard-card h2:focus {
  outline: none;
}

.reassurance {
  color: var(--color-muted);
  font-size: 1rem;
  margin: 0 0 var(--space-4);
}

.wizard-card p {
  margin: 0 0 var(--space-4);
}

.muted {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.eyebrow {
  color: var(--color-primary-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

.example {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 0.95rem;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}

.privacy-note {
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  color: var(--color-primary-strong);
  font-size: 0.95rem;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}

.model-language-note {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 var(--space-4);
}

/* The fast path on the profile step: browse the job catalog instead of writing
   from scratch. A bordered panel with the job-search illustration on the right
   makes it hard to miss; the accent button carries the call to action. */
.profile-job-browse {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.profile-job-browse-lead {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.profile-job-browse-text {
  flex: 1;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.profile-job-browse-text p {
  margin: 0;
}

.profile-job-browse-art {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
}

@media (max-width: 700px) {
  .profile-job-browse-art {
    width: 72px;
    height: 72px;
  }
}

/* ---------- Fields ---------- */

.field {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  /* Pack content to the top so a short field beside a tall one (e.g. postcode
     next to the city picker with its hint) does not stretch a gap between its
     label and input. */
  align-content: start;
}

/* Picker fields wrap the label in <label><span>…</span></label>; plain fields
   put the span directly under .field. Both must read the same weight. */
.field > span,
.field > label > span {
  font-weight: 600;
  font-size: 0.95rem;
}

.field > span .optional-tag,
.field > label > span .optional-tag {
  color: var(--color-muted);
  font-weight: 400;
}

.field > span .required-tag,
.field > label > span .required-tag {
  color: var(--color-error);
  font-weight: 500;
}

.field-error {
  color: var(--color-error);
  font-size: 0.9rem;
  font-weight: 500;
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--color-error);
}

.field.has-error input:focus,
.field.has-error textarea:focus {
  outline-color: var(--color-error-soft);
}

input,
textarea,
select {
  width: 100%;
  min-height: 56px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  padding: 14px 16px;
}

textarea {
  line-height: 1.5;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-primary-soft);
  outline-offset: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}

@media (max-width: 680px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Date range ---------- */

.date-range {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.date-range legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 var(--space-2);
}

.date-range.has-error {
  border-color: var(--color-error);
}

.date-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.date-label {
  min-width: 3.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.date-row select {
  flex: 1;
  min-width: 0;
}

.date-current {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
}

.date-current input {
  width: auto;
  min-height: 0;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  padding: 14px 24px;
  min-height: 56px;
  cursor: pointer;
  text-decoration: none;
}

.button.primary {
  background: var(--color-primary);
  color: #ffffff;
}

.button.primary:hover {
  background: var(--color-primary-strong);
}

.button.ai {
  background: var(--color-ai);
  color: #ffffff;
}

.button.ai:hover {
  background: var(--color-ai-strong);
}

/* Wizard nav rows hold up to three choices in three languages; slightly
   slimmer text and padding keep them on one line without shrinking the 56px
   touch target. */
.wizard-card .actions .button {
  font-size: 0.95rem;
  padding-left: 14px;
  padding-right: 14px;
}

/* Parallel options (export formats, save methods) stack vertically instead of
   crowding a row — the same pattern as the language choice screen. */
.action-stack {
  display: grid;
  gap: var(--space-3);
  max-width: 420px;
  margin: var(--space-5) 0 var(--space-4);
}

/* A three-choice row (back, AI improve, keep my title) only fits on one line
   in all three languages with slightly slimmer buttons. Scoped to rows that
   opt in, so buttons elsewhere keep their full size. */
.actions.actions-compact {
  gap: var(--space-2);
}

/* Suggestion-scoped actions sit inside the violet panel, close to the text
   they act on, and stay visually lighter than the screen's nav row. */
.ai-result-panel .actions.panel-actions {
  margin-top: var(--space-2);
  gap: var(--space-2);
}

.actions.actions-compact .button {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.9rem;
}

.button.accent {
  background: var(--color-accent);
  color: #ffffff;
}

.button.accent:hover {
  background: var(--color-accent-strong);
}

.button.secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.button.secondary:hover {
  border-color: var(--color-muted);
}

.button.tertiary {
  background: none;
  color: var(--color-primary-strong);
  text-decoration: underline;
  min-height: 48px;
}

.button.danger-quiet {
  background: none;
  border-color: transparent;
  color: var(--color-error);
  min-height: 48px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Back is always the first button in the markup and must stay leftmost:
   never reorder buttons in the row layout. */

@media (max-width: 680px) {
  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* In the stacked mobile layout the primary action moves to the top for
     reachability and Back drops below all forward actions. */
  .actions .button.primary,
  .actions .button.ai {
    order: -1;
  }

  .actions .back-button {
    order: 1;
  }
}

/* ---------- The assistant's suggestion panel (violet = suggestion) ---------- */

.notes-recap {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}

.notes-recap .panel-label {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.notes-recap p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.ai-result-panel {
  background: var(--color-ai-surface);
  border: 1.5px solid var(--color-ai-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.ai-result-panel .panel-label {
  margin: 0 0 var(--space-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ai-strong);
}

.ai-result-panel textarea,
.ai-result-panel input {
  background: var(--color-surface);
  border-color: var(--color-ai-border);
}

.ai-result-panel .muted {
  margin-bottom: var(--space-2);
}

.ai-stream {
  min-height: 110px;
  white-space: pre-wrap;
  background: var(--color-surface);
  border: 1.5px dashed var(--color-ai-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}

.ai-stream:empty::before {
  content: "…";
  color: var(--color-muted);
}

.ai-error {
  color: var(--color-error);
  font-size: 0.9rem;
  margin: var(--space-2) 0 0;
}

/* ---------- Job picker ---------- */

.job-picker {
  position: relative;
}

.job-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(24, 36, 32, 0.14);
  max-height: 340px;
  overflow-y: auto;
}

.job-option {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--color-text);
}

.job-option:last-child {
  border-bottom: none;
}

.job-option:hover,
.job-option:focus-visible {
  background: var(--color-primary-soft);
}

.job-option strong {
  display: block;
  font-size: 1rem;
}

.job-option-summary {
  display: block;
  color: var(--color-muted);
  font-size: 0.88rem;
}

.job-picker-empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted);
  font-size: 0.95rem;
}

.picker-hint {
  margin: 0;
  font-size: 0.88rem;
}

/* Search hint on the left, the browse control tucked to the right, so the
   two ways to find a job read as one paired row instead of a stray link. */
.picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.picker-foot .picker-hint {
  flex: 1 1 12rem;
}

.button.picker-browse {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.job-browse {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
  /* Cap the panel so the 21-category grid scrolls inside its own box instead
     of pushing the employer, location, and date fields off the screen. */
  max-height: min(58vh, 460px);
  overflow-y: auto;
}

.job-browse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  position: sticky;
  top: calc(-1 * var(--space-4));
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: 1;
}

.job-browse-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.category-grid .category-button {
  min-height: 56px;
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
}

@media (max-width: 680px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Duty checklist and skill chips (curated catalog content) ---------- */

.duty-checklist {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.duty-checklist legend {
  font-weight: 650;
  font-size: 1.05rem;
  padding: 0 var(--space-2);
}

.duty-checklist .muted {
  margin: 0 0 var(--space-3);
}

.duty-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  min-height: 44px;
  cursor: pointer;
  font-size: 1rem;
}

.duty-item input {
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.skill-chips {
  margin: 0 0 var(--space-4);
}

.skill-chips .panel-label {
  margin: 0 0 var(--space-1);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.skill-chips .muted {
  margin: 0 0 var(--space-2);
}

.skill-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.skill-chip {
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 16px;
  min-height: 44px;
  cursor: pointer;
}

.skill-chip:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.skill-chip.added {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  cursor: default;
}

/* ---------- Notices ---------- */

.notice {
  background: var(--color-attention-soft);
  border-radius: var(--radius-md);
  color: var(--color-attention);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}

.notice.compact {
  font-size: 0.95rem;
}

/* ---------- Experience cards ---------- */

.experience-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-3);
  flex-wrap: wrap;
}

.experience-card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.experience-card .card-meta {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.experience-card .card-status {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-strong);
}

.experience-card .card-status.pending {
  color: var(--color-attention);
}

.experience-card .card-actions {
  display: flex;
  gap: var(--space-2);
}

.entry-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.entry-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.entry-card-head .panel-label {
  margin: 0;
}

/* ---------- Quality checks ---------- */

.quality-checks {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.quality-checks h3 {
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
}

.quality-checks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quality-checks li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.quality-checks li:last-child {
  border-bottom: none;
}

.quality-checks li.ok strong {
  color: var(--color-primary-strong);
}

.quality-checks li.attention strong {
  color: var(--color-attention);
}

.quality-checks li.optional strong {
  color: var(--color-muted);
}

.quality-checks .quality-summary {
  margin: 0 0 var(--space-3);
}

/* ---------- AI loading screen ---------- */

.ai-load-progress {
  margin: var(--space-4) 0;
}

.ai-load-bar {
  height: 12px;
  border-radius: 6px;
  background: var(--color-ai-surface);
  border: 1px solid var(--color-ai-border);
  overflow: hidden;
}

.ai-load-bar > span {
  display: block;
  height: 100%;
  background: var(--color-ai);
  border-radius: 6px;
  transition: width 0.4s ease;
  min-width: 6px;
}

.ai-load-stage {
  margin: var(--space-2) 0 0;
  color: var(--color-ai-strong);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ---------- Language choice ---------- */

.language-choices {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}

.language-choice-button {
  width: 100%;
  min-height: 64px;
  font-size: 1.15rem;
}

/* ---------- A4 WYSIWYG sheet on the export screen ---------- */
/* Container-query units scale everything to the sheet width, so proportions
   match a real A4 page (595pt wide): 10.5pt body = 1.76cqw, 16mm side margin
   = 7.6cqw, and so on — the same numbers the PDF generator uses. */

.a4-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: var(--space-5) 0 var(--space-2);
}

.a4-sheet {
  container-type: inline-size;
  width: 100%;
  max-width: 640px;
  margin: 0 auto var(--space-4);
}

.a4-paper {
  min-height: calc(100cqw * 1.4142);
  padding: 8.6cqw 7.6cqw;
  font-size: 1.76cqw;
  line-height: 1.5;
  border-radius: 2px;
  box-shadow: 0 2px 14px rgba(24, 36, 32, 0.16);
}

.a4-paper .cv-header h1 {
  font-size: 3.7cqw;
  margin: 0 0 0.6cqw;
}

.a4-paper .cv-header p,
.a4-paper .cv-meta {
  font-size: 1.68cqw;
  margin: 0 0 1cqw;
}

.a4-paper h2 {
  font-size: 1.85cqw;
  margin: 3.2cqw 0 1.4cqw;
  padding-bottom: 1cqw;
}

.a4-paper h3 {
  font-size: 1.93cqw;
  margin: 2.2cqw 0 0.4cqw;
}

.a4-paper section > p {
  margin: 0 0 1cqw;
}

.a4-paper ul {
  margin: 0.9cqw 0 1.8cqw 2.4cqw;
}

.a4-paper li {
  margin-bottom: 0.7cqw;
}

/* ---------- The paper rail: your CV, growing ---------- */

.preview-pane {
  display: block;
}

.preview-pane .panel-label {
  margin: 0 0 var(--space-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cv-paper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(24, 36, 32, 0.08);
  padding: var(--space-5);
  font-size: 0.72rem;
  line-height: 1.45;
}

.cv-paper .cv-document {
  font-family: var(--font-body);
}

.cv-paper .cv-header h1 {
  font-size: 1.3rem;
  margin: 0 0 2px;
}

.cv-paper .cv-header p,
.cv-paper .cv-meta {
  color: var(--color-muted);
  margin: 0 0 6px;
}

.cv-paper h2 {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
  margin: 20px 0 10px;
}

.cv-paper h3 {
  font-size: 0.76rem;
  margin: 14px 0 2px;
}

.cv-paper section > p {
  margin: 0 0 8px;
}

.cv-paper ul {
  margin: 6px 0 12px 18px;
  padding: 0;
}

.cv-paper li {
  margin-bottom: 3px;
}

.cv-paper .empty-preview {
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.cv-paper .empty-preview h3 {
  font-size: 0.95rem;
  margin: 0 0 var(--space-2);
}

@media (min-width: 1100px) {
  .preview-pane {
    display: block;
    position: sticky;
    top: var(--space-4);
    align-self: start;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

/* Below the rail breakpoint the preview stacks inline below the wizard. */

@media (max-width: 1099px) {
  .preview-pane {
    margin-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
  }
}

/* ---------- Sticky mobile action bar ---------- */

@media (max-width: 680px) {
  html {
    font-size: 18px;
  }

  /* Let the header break onto two rows so the wordmark keeps its own line and
     the status/lang/help controls flow below instead of colliding with it. */
  .site-header {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .header-status {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-2) var(--space-3);
    font-size: 0.8rem;
  }

  .wizard-card {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
  }

  .workspace {
    padding-bottom: 120px;
  }
}

/* ---------- Footer ---------- */

.app-footer {
  max-width: var(--focus-column);
  width: 100%;
  margin: var(--space-5) auto var(--space-6);
  padding: 0 var(--space-4);
  color: var(--color-muted);
  font-size: 0.85rem;
}

.app-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}

.app-footer a {
  color: var(--color-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------- Icons ---------- */

.icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

.icon-arrow-left { -webkit-mask-image: url("/static/icons/fontawesome/solid/arrow-left.svg"); mask-image: url("/static/icons/fontawesome/solid/arrow-left.svg"); }
.icon-arrow-right { -webkit-mask-image: url("/static/icons/fontawesome/solid/arrow-right.svg"); mask-image: url("/static/icons/fontawesome/solid/arrow-right.svg"); }
.icon-check { -webkit-mask-image: url("/static/icons/fontawesome/solid/check.svg"); mask-image: url("/static/icons/fontawesome/solid/check.svg"); }
.icon-circle-question { -webkit-mask-image: url("/static/icons/fontawesome/solid/circle-question.svg"); mask-image: url("/static/icons/fontawesome/solid/circle-question.svg"); }
.icon-download { -webkit-mask-image: url("/static/icons/fontawesome/solid/download.svg"); mask-image: url("/static/icons/fontawesome/solid/download.svg"); }
.icon-eye { -webkit-mask-image: url("/static/icons/fontawesome/solid/eye.svg"); mask-image: url("/static/icons/fontawesome/solid/eye.svg"); }
.icon-file-code { -webkit-mask-image: url("/static/icons/fontawesome/solid/file-code.svg"); mask-image: url("/static/icons/fontawesome/solid/file-code.svg"); }
.icon-file-lines { -webkit-mask-image: url("/static/icons/fontawesome/solid/file-lines.svg"); mask-image: url("/static/icons/fontawesome/solid/file-lines.svg"); }
.icon-floppy-disk { -webkit-mask-image: url("/static/icons/fontawesome/solid/floppy-disk.svg"); mask-image: url("/static/icons/fontawesome/solid/floppy-disk.svg"); }
.icon-folder-open { -webkit-mask-image: url("/static/icons/fontawesome/solid/folder-open.svg"); mask-image: url("/static/icons/fontawesome/solid/folder-open.svg"); }
.icon-microchip { -webkit-mask-image: url("/static/icons/fontawesome/solid/microchip.svg"); mask-image: url("/static/icons/fontawesome/solid/microchip.svg"); }
.icon-plus { -webkit-mask-image: url("/static/icons/fontawesome/solid/plus.svg"); mask-image: url("/static/icons/fontawesome/solid/plus.svg"); }
.icon-print { -webkit-mask-image: url("/static/icons/fontawesome/solid/print.svg"); mask-image: url("/static/icons/fontawesome/solid/print.svg"); }
.icon-shield-halved { -webkit-mask-image: url("/static/icons/fontawesome/solid/shield-halved.svg"); mask-image: url("/static/icons/fontawesome/solid/shield-halved.svg"); }
.icon-trash { -webkit-mask-image: url("/static/icons/fontawesome/solid/trash.svg"); mask-image: url("/static/icons/fontawesome/solid/trash.svg"); }
.icon-universal-access { -webkit-mask-image: url("/static/icons/fontawesome/solid/universal-access.svg"); mask-image: url("/static/icons/fontawesome/solid/universal-access.svg"); }
.icon-wand-magic-sparkles { -webkit-mask-image: url("/static/icons/fontawesome/solid/wand-magic-sparkles.svg"); mask-image: url("/static/icons/fontawesome/solid/wand-magic-sparkles.svg"); }
.icon-xmark { -webkit-mask-image: url("/static/icons/fontawesome/solid/xmark.svg"); mask-image: url("/static/icons/fontawesome/solid/xmark.svg"); }
.icon-circle-info { -webkit-mask-image: url("/static/icons/fontawesome/solid/circle-info.svg"); mask-image: url("/static/icons/fontawesome/solid/circle-info.svg"); }
.icon-users { -webkit-mask-image: url("/static/icons/fontawesome/solid/users.svg"); mask-image: url("/static/icons/fontawesome/solid/users.svg"); }
.icon-heart { -webkit-mask-image: url("/static/icons/fontawesome/solid/heart.svg"); mask-image: url("/static/icons/fontawesome/solid/heart.svg"); }
.icon-hand { -webkit-mask-image: url("/static/icons/fontawesome/solid/hand.svg"); mask-image: url("/static/icons/fontawesome/solid/hand.svg"); }
.icon-sliders { -webkit-mask-image: url("/static/icons/fontawesome/solid/sliders.svg"); mask-image: url("/static/icons/fontawesome/solid/sliders.svg"); }
.icon-list-check { -webkit-mask-image: url("/static/icons/fontawesome/solid/list-check.svg"); mask-image: url("/static/icons/fontawesome/solid/list-check.svg"); }
.icon-lightbulb { -webkit-mask-image: url("/static/icons/fontawesome/solid/lightbulb.svg"); mask-image: url("/static/icons/fontawesome/solid/lightbulb.svg"); }
.icon-address-card { -webkit-mask-image: url("/static/icons/fontawesome/solid/address-card.svg"); mask-image: url("/static/icons/fontawesome/solid/address-card.svg"); }
.icon-user-pen { -webkit-mask-image: url("/static/icons/fontawesome/solid/user-pen.svg"); mask-image: url("/static/icons/fontawesome/solid/user-pen.svg"); }
.icon-briefcase { -webkit-mask-image: url("/static/icons/fontawesome/solid/briefcase.svg"); mask-image: url("/static/icons/fontawesome/solid/briefcase.svg"); }
.icon-screwdriver-wrench { -webkit-mask-image: url("/static/icons/fontawesome/solid/screwdriver-wrench.svg"); mask-image: url("/static/icons/fontawesome/solid/screwdriver-wrench.svg"); }
.icon-graduation-cap { -webkit-mask-image: url("/static/icons/fontawesome/solid/graduation-cap.svg"); mask-image: url("/static/icons/fontawesome/solid/graduation-cap.svg"); }
.icon-certificate { -webkit-mask-image: url("/static/icons/fontawesome/solid/certificate.svg"); mask-image: url("/static/icons/fontawesome/solid/certificate.svg"); }
.icon-language { -webkit-mask-image: url("/static/icons/fontawesome/solid/language.svg"); mask-image: url("/static/icons/fontawesome/solid/language.svg"); }

/* ---------- Static pages ---------- */

.static-page,
.content-page {
  max-width: var(--focus-column);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.static-page h1,
.content-page h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
}

.content-page h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-top: var(--space-6);
}

/* ---------- Content pages: iconed hero + section list ---------- */

/* A round tinted chip that holds a mask icon; the icon inherits the chip's
   colour, so one rule styles every page badge. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}

.badge .icon {
  width: 1em;
  height: 1em;
}

.page-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.page-hero .badge {
  width: 60px;
  height: 60px;
  font-size: 28px;
}

.page-hero h1 {
  margin: 0;
}

.page-lead {
  font-size: 1.1rem;
  margin: 0 0 var(--space-4);
}

.page-section {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.page-section .badge {
  width: 44px;
  height: 44px;
  font-size: 20px;
  margin-top: 2px;
}

.page-section h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.2rem;
}

.page-section-body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 680px) {
  .page-hero .badge {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
}

/* ---------- Initial loading ---------- */

.initial-loading {
  max-width: var(--focus-column);
  margin: var(--space-7) auto;
  padding: 0 var(--space-4);
  text-align: center;
  color: var(--color-muted);
}

.initial-loading .loading-logo {
  width: 96px;
  height: 96px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Print: only the CV leaves the building ---------- */

@media print {
  body {
    background: #ffffff;
  }

  .site-header,
  .site-nav,
  .progress-area,
  .wizard-panel,
  .app-footer,
  .notice,
  .skip-link {
    display: none !important;
  }

  .workspace {
    display: block;
    max-width: none;
    padding: 0;
  }

  .preview-pane {
    display: block !important;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .preview-pane .panel-label {
    display: none;
  }

  .cv-paper {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: 11pt;
    line-height: 1.5;
  }

  .cv-paper .cv-header h1 {
    font-size: 22pt;
  }

  .cv-paper h2 {
    font-size: 12pt;
    border-bottom: 1px solid #999;
  }

  .cv-paper h3 {
    font-size: 11.5pt;
  }

  .cv-paper .cv-entry {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .cv-paper .empty-preview {
    display: none;
  }

  @page {
    size: A4;
    margin: 18mm 16mm;
  }
}