/* Conxfolio résumé content workspace
   One product rail · one focused content surface · one live document. */

body.folio-v5:has(.resume-editor-page),
body.folio-v5:has(.resume-cvflow-start),
body.folio-v5:has(.resume-designs-page) {
  --cv-rule: color-mix(in srgb, var(--cx-ink) 15%, var(--cx-paper));
  --cv-rule-strong: color-mix(in srgb, var(--cx-ink) 28%, var(--cx-paper));
  --cv-wash: color-mix(in srgb, var(--cx-porcelain) 74%, var(--cx-paper));
  --cv-shadow: 0 18px 55px color-mix(in srgb, var(--cx-ink) 10%, transparent);
}

/* The live paper finishes after the surrounding shell. Chromium's scroll
   anchoring otherwise follows that growing iframe and pulls the whole résumé
   workspace down after an import or template change, hiding its mode bar. */
.resume-welcome,
.resume-designs-page,
.resume-import-page,
.resume-onboarding-page,
.resume-editor-page { overflow-anchor: none; }

/* The global product bar answers which tool is open. This second, compact bar
   answers what kind of résumé work is open; the left rail below it follows
   that choice instead of mixing content and design controls. */
.resume-context-bar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 9px clamp(18px, 2.5vw, 34px);
  border-bottom: 1px solid var(--cv-rule);
  background: color-mix(in srgb, var(--cx-paper) 96%, transparent);
  backdrop-filter: blur(14px);
}
.resume-context-bar > nav { display: flex; align-items: stretch; gap: 4px; }
.resume-context-bar > nav > button {
  min-width: 168px;
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 13px;
  color: var(--cx-ink60);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
}
.resume-context-bar > nav > button.on { color: var(--cx-ink); border-color: var(--cv-rule-strong); background: var(--cx-paper); box-shadow: 0 4px 16px color-mix(in srgb, var(--cx-ink) 6%, transparent); }
.resume-context-bar svg { width: 19px; height: 19px; }
.resume-context-bar b { display: block; font: 600 13px/1.15 var(--cx-font-ui); }
.resume-context-bar small { display: block; margin-top: 3px; font: 400 10px/1.15 var(--cx-font-ui); }
.resume-context-bar > div { display: flex; align-items: center; gap: 16px; }
.resume-context-bar > div > span { max-width: 28ch; overflow: hidden; color: var(--cx-ink60); font: 500 11px/1.2 var(--cx-font-ui); text-overflow: ellipsis; white-space: nowrap; }

/* Public design discovery remains optional. Onboarding owns the source
   decision; this page only helps somebody inspect and choose a design. */
body.folio-v5 .resume-designs-page { padding-top: 28px; }
body.folio-v5 .resume-designs-hero { align-items: center; gap: clamp(28px, 5vw, 72px); padding-bottom: 24px; }
body.folio-v5 .resume-designs-hero h1 { max-width: 14ch; margin-top: 8px; font-size: clamp(42px, 4.4vw, 64px); }
body.folio-v5 .resume-designs-hero p { font-size: 14px; }
.resume-gallery-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.resume-gallery-paths > button {
  min-height: 62px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--cx-ink60);
  text-align: left;
  border: 1px solid var(--cv-rule);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cx-paper) 72%, transparent);
}
.resume-gallery-paths > button.on { color: var(--cx-ink); border-color: var(--cx-ink); background: var(--cx-paper); box-shadow: 0 8px 22px color-mix(in srgb, var(--cx-ink) 7%, transparent); }
.resume-gallery-paths svg { width: 19px; height: 19px; }
.resume-gallery-paths b { display: block; font: 600 12px/1.15 var(--cx-font-ui); }
.resume-gallery-paths small { display: block; margin-top: 4px; font: 400 9px/1.2 var(--cx-font-ui); }
body.folio-v5 .resume-designs-tools { top: var(--topbar-h); min-height: 64px; padding-block: 10px; }
body.folio-v5 .resume-designs-count { margin-top: 16px; }
.resume-design-card-copy button {
  padding: 0;
  color: var(--cx-ink);
  border: 0;
  background: transparent;
  font: 750 12px/1 var(--cx-font-ui);
  white-space: nowrap;
}
.resume-design-card-copy button:hover { text-decoration: underline; text-underline-offset: 4px; }
.resume-design-preview > header > [data-resume-design-dialog-use] { justify-self: end; }
.resume-designs-back { display: inline-flex; margin-top: 18px; color: var(--cx-ink); font: 600 12px/1.2 var(--cx-font-ui); text-underline-offset: 4px; }

/* A selected design stays visible under a translucent decision layer. The
   paper dialog remains opaque enough to read; only the surrounding layer is
   transparent. */
.resume-template-choice {
  width: min(590px, calc(100vw - 32px));
  padding: 30px;
  color: var(--cx-ink);
  border: 1px solid var(--cx-ink);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cx-paper) 97%, transparent);
  box-shadow: var(--cv-shadow);
  backdrop-filter: blur(18px);
}
.resume-template-choice::backdrop { background: color-mix(in srgb, var(--cx-ink) 34%, transparent); backdrop-filter: blur(3px); }
.resume-template-choice-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 1px solid var(--cv-rule); border-radius: 50%; background: var(--cx-paper); font-size: 20px; }
.resume-template-choice header { padding-right: 44px; }
.resume-template-choice header small { color: var(--cx-ink60); font: 550 9px/1 var(--cx-font-mono); letter-spacing: .11em; text-transform: uppercase; }
.resume-template-choice h2 { max-width: 12ch; margin: 10px 0 0; font: 400 44px/.98 var(--cx-font-display); letter-spacing: -.04em; }
.resume-template-choice header p { margin: 11px 0 0; color: var(--cx-ink60); font: 400 13px/1.45 var(--cx-font-ui); }
.resume-template-choice-options { display: grid; gap: 9px; margin-top: 24px; }
.resume-template-choice-options > button { min-height: 78px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: center; gap: 13px; padding: 11px 13px; color: var(--cx-ink); text-align: left; border: 1px solid var(--cv-rule); border-radius: 9px; background: var(--cx-paper); }
.resume-template-choice-options > button:hover, .resume-template-choice-options > button:focus-visible { border-color: var(--cx-ink); outline: none; transform: translateY(-1px); }
.resume-template-choice-options i { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--cv-rule); border-radius: 8px; background: var(--cv-wash); }
.resume-template-choice-options b { display: block; font: 600 14px/1.2 var(--cx-font-ui); }
.resume-template-choice-options small { display: block; margin-top: 5px; color: var(--cx-ink60); font: 400 10px/1.3 var(--cx-font-ui); }
.resume-template-choice footer { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--cv-rule); }
.resume-template-choice footer button { padding: 0; color: var(--cx-ink); border: 0; background: transparent; font: 550 11px/1.3 var(--cx-font-ui); }
.resume-import-scan-state { margin: 0 28px 18px; }

body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-design-canvas { padding-top: 34px; }
body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-design-tabs { display: none !important; }

/* Retire the duplicate internal rail. Conxfolio's permanent product rail is
   the only section controller. */
body.folio-v5 .resume-editor-page .resume-section-nav,
body.folio-v5 .resume-editor-page .resume-evidence-desk { display: none !important; }
body.folio-v5 .resume-editor-page > .career-resume-header.s3-row2 { display: none !important; }

@media (min-width: 901px) {
  .resume-context-bar { position: sticky; top: var(--topbar-h); z-index: 12; }
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-layout {
    display: grid !important;
    grid-template-columns: minmax(420px, .82fr) minmax(560px, 1.18fr) !important;
    min-height: calc(100vh - var(--s1-bar-h));
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch;
    background: var(--cx-paper);
  }
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-canvas {
    grid-column: 1 !important;
    min-width: 0;
    min-height: calc(100vh - var(--s1-bar-h));
    padding: clamp(32px, 4vw, 64px) clamp(32px, 4.4vw, 72px) 80px !important;
    border-right: 1px solid var(--cv-rule) !important;
    background: var(--cx-paper) !important;
  }
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-preview {
    grid-column: 2 !important;
    position: sticky !important;
    top: var(--s1-bar-h) !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: calc(100vh - var(--s1-bar-h)) !important;
    padding: 18px !important;
    overflow: auto !important;
    background: var(--cv-wash) !important;
  }
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-preview .document-frame,
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-preview iframe {
    height: calc(100vh - var(--s1-bar-h) - 36px) !important;
    min-height: 620px;
  }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-layout {
    display: grid !important;
    grid-template-columns: minmax(420px, .82fr) minmax(560px, 1.18fr) !important;
    min-height: calc(100vh - var(--s1-bar-h));
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch;
    background: var(--cx-paper);
  }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-canvas { display: none !important; }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-design-canvas {
    grid-column: 1 !important;
    display: block !important;
    min-width: 0;
    min-height: calc(100vh - var(--s1-bar-h));
    padding: clamp(32px, 4vw, 64px) clamp(32px, 4.4vw, 72px) 80px !important;
    overflow: visible !important;
    border-right: 1px solid var(--cv-rule) !important;
    background: var(--cx-paper) !important;
  }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-preview {
    grid-column: 2 !important;
    position: sticky !important;
    top: calc(var(--topbar-h) + 66px) !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: calc(100vh - var(--topbar-h) - 66px) !important;
    padding: 18px !important;
    overflow: hidden !important;
    background: var(--cv-wash) !important;
  }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-preview .document-frame,
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-preview iframe {
    height: calc(100vh - var(--topbar-h) - 132px) !important;
    min-height: 560px;
  }
}

.resume-content-overview,
.resume-focused-editor {
  width: min(100%, 760px);
  margin-inline: auto;
}
.resume-content-overview > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin-bottom: 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--cx-ink);
}
.resume-content-overview > header > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cv-rule-strong);
  border-radius: 50%;
  background: var(--cx-paper);
}
.resume-content-overview > header svg { width: 21px; height: 21px; }
.resume-content-overview > header small,
.resume-focused-editor > header > span,
.resume-source-dialog header small,
.resume-inline-import header small,
.resume-content-dialog header small {
  display: block;
  margin-bottom: 9px;
  color: var(--cx-ink60);
  font: 550 10px/1 var(--cx-font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.resume-content-overview h1,
.resume-focused-editor h1 {
  margin: 0;
  color: var(--cx-ink);
  font: 400 clamp(38px, 4vw, 56px)/.96 var(--cx-font-display);
  letter-spacing: -.045em;
}
.resume-content-overview header p,
.resume-focused-editor header p {
  margin: 10px 0 0;
  color: var(--cx-ink60);
  font: 400 14px/1.5 var(--cx-font-ui);
}
.resume-content-entries { display: grid; gap: 10px; }
.resume-content-entry {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  color: var(--cx-ink);
  text-align: left;
  border: 1px solid var(--cv-rule);
  border-radius: 10px;
  background: var(--cx-paper);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cx-ink) 4%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.resume-content-entry:hover,
.resume-content-entry:focus-visible {
  border-color: var(--cx-ink);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--cx-ink) 8%, transparent);
  transform: translateY(-1px);
  outline: none;
}
.resume-content-entry > i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cv-rule);
  border-radius: 8px;
  background: var(--cv-wash);
}
.resume-content-entry svg { width: 19px; height: 19px; }
.resume-content-entry > span { min-width: 0; display: grid; gap: 6px; }
.resume-content-entry b { font: 550 15px/1.15 var(--cx-font-ui); }
.resume-content-entry small { overflow: hidden; color: var(--cx-ink60); font: 400 12px/1.25 var(--cx-font-ui); white-space: nowrap; text-overflow: ellipsis; }
.resume-content-entry em { color: var(--cx-ink60); font: 500 9px/1 var(--cx-font-mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.resume-content-entry > strong { font: 400 18px/1 var(--cx-font-ui); }
.resume-content-entry.is-empty { border-style: dashed; background: var(--cv-wash); }
.resume-content-empty { min-height: 220px; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 30px; text-align: center; border: 1px dashed var(--cv-rule-strong); border-radius: 10px; background: var(--cv-wash); }
.resume-content-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--cv-rule); border-radius: 50%; background: var(--cx-paper); }
.resume-content-empty b { font: 500 18px/1.2 var(--cx-font-display); }
.resume-content-empty p { max-width: 36ch; margin: 0; color: var(--cx-ink60); font: 400 13px/1.5 var(--cx-font-ui); }
.resume-add-entry,
.resume-add-content {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--cx-ink);
  text-align: left;
  border: 1px solid var(--cv-rule);
  border-radius: 10px;
  background: transparent;
}
.resume-add-entry { min-height: 62px; grid-template-columns: 30px 1fr auto; padding: 10px 16px; }
.resume-add-content { min-height: 72px; grid-template-columns: 34px minmax(0, 1fr) 20px; margin-top: 30px; padding: 12px 16px; border-style: dashed; background: var(--cv-wash); }
.resume-add-entry > span,
.resume-add-content > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--cv-rule-strong); border-radius: 50%; }
.resume-add-entry b,
.resume-add-content b { font: 550 13px/1.2 var(--cx-font-ui); }
.resume-add-entry small,
.resume-add-content small { display: block; margin-top: 4px; color: var(--cx-ink60); font: 400 11px/1.25 var(--cx-font-ui); }
.resume-add-entry:hover,
.resume-add-content:hover { border-color: var(--cx-ink); background: var(--cx-paper); }

.resume-focused-editor > header {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--cx-ink);
}
.resume-focused-editor > header > button {
  margin: 0 0 28px;
  padding: 0;
  color: var(--cx-ink60);
  border: 0;
  background: transparent;
  font: 500 12px/1.2 var(--cx-font-ui);
}
.resume-focused-editor .editor-body { display: grid; gap: 22px; }
.resume-focused-editor .experience-entry,
.resume-focused-editor .education-entry { padding: 0; border: 0; background: transparent; box-shadow: none; }
.resume-focused-editor > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--cv-rule);
}
.resume-focused-editor > footer > span { color: var(--cx-ink60); font: 400 11px/1.3 var(--cx-font-ui); }
.resume-focused-editor > footer > span i { display: inline-grid; width: 17px; height: 17px; place-items: center; margin-right: 7px; color: var(--cx-paper); border-radius: 50%; background: var(--cx-ink); font-style: normal; font-size: 9px; }
.resume-focused-editor > footer .button { min-width: 140px; }

/* In-place content and import overlays */
.resume-content-dialog,
.resume-inline-import {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  color: var(--cx-ink);
  border: 1px solid var(--cx-ink);
  border-radius: 14px;
  background: var(--cx-paper);
  box-shadow: var(--cv-shadow);
}
.resume-content-dialog::backdrop,
.resume-inline-import::backdrop { background: color-mix(in srgb, var(--cx-ink) 42%, transparent); backdrop-filter: blur(5px); }
.resume-content-dialog > header,
.resume-inline-import > header { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 28px 30px 24px; border-bottom: 1px solid var(--cv-rule); }
.resume-content-dialog h2,
.resume-inline-import h2 { margin: 0; font: 400 38px/1 var(--cx-font-display); letter-spacing: -.035em; }
.resume-content-dialog header p,
.resume-inline-import header p { max-width: 56ch; margin: 9px 0 0; color: var(--cx-ink60); font: 400 13px/1.45 var(--cx-font-ui); }
.resume-content-dialog header > button,
.resume-inline-import header > button { width: 38px; height: 38px; border: 1px solid var(--cv-rule); border-radius: 50%; background: var(--cx-paper); font-size: 22px; }
.resume-content-dialog > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 22px 24px 28px; overflow: auto; }
.resume-content-dialog > div > button { min-height: 76px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 12px; color: var(--cx-ink); text-align: left; border: 1px solid var(--cv-rule); border-radius: 9px; background: var(--cx-paper); }
.resume-content-dialog > div > button:hover { border-color: var(--cx-ink); background: var(--cv-wash); }
.resume-content-dialog i { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--cv-rule); border-radius: 7px; }
.resume-content-dialog svg { width: 18px; height: 18px; }
.resume-content-dialog b { display: block; font: 550 13px/1.2 var(--cx-font-ui); }
.resume-content-dialog small { display: block; margin-top: 4px; color: var(--cx-ink60); font: 400 10px/1.3 var(--cx-font-ui); }
.resume-content-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 24px; border-top: 1px solid var(--cv-rule); }
.resume-content-dialog > footer > button { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0; color: var(--cx-ink); text-align: left; border: 0; background: transparent; }
.resume-content-dialog > footer > button svg { width: 18px; height: 18px; }
.resume-content-dialog > footer > a { flex: none; color: var(--cx-ink60); font: 500 11px/1.2 var(--cx-font-ui); }

.resume-inline-import { width: min(650px, calc(100vw - 32px)); }
.resume-inline-import > nav { display: flex; gap: 0; padding: 18px 28px 0; }
.resume-inline-import > nav button { min-width: 140px; min-height: 42px; color: var(--cx-ink60); border: 0; border-bottom: 1px solid var(--cv-rule); background: transparent; font: 550 12px/1 var(--cx-font-ui); }
.resume-inline-import > nav button.on { color: var(--cx-ink); border-bottom: 2px solid var(--cx-ink); }
.resume-inline-import > section { padding: 24px 28px 28px; }
.resume-import-drop { width: 100%; min-height: 220px; display: grid; justify-items: center; align-content: center; gap: 10px; color: var(--cx-ink); border: 1px dashed var(--cv-rule-strong); border-radius: 10px; background: var(--cv-wash); }
.resume-import-drop i { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--cv-rule-strong); border-radius: 50%; background: var(--cx-paper); }
.resume-import-drop b { font: 500 20px/1.2 var(--cx-font-display); }
.resume-import-drop span { color: var(--cx-ink60); font: 400 11px/1.3 var(--cx-font-ui); }
.resume-inline-import label { display: block; margin-bottom: 9px; font: 550 12px/1.2 var(--cx-font-ui); }
.resume-inline-import textarea { width: 100%; min-height: 240px; padding: 16px; resize: vertical; color: var(--cx-ink); border: 1px solid var(--cv-rule-strong); border-radius: 9px; background: var(--cx-paper); font: 400 14px/1.5 var(--cx-font-ui); }
.resume-inline-import [data-resume-import-panel="paste"] .button { margin-top: 16px; }
.resume-inline-import > footer { display: flex; justify-content: space-between; gap: 18px; padding: 16px 28px; border-top: 1px solid var(--cv-rule); color: var(--cx-ink60); font: 400 10px/1.2 var(--cx-font-ui); }
.resume-inline-import > footer button { padding: 0; color: var(--cx-ink); border: 0; background: transparent; }

/* Design-selected start: the source chooser is an overlay on the selected
   document, not a separate onboarding page. */
.resume-cvflow-start { min-height: calc(100vh - var(--topbar-h)); background: var(--cv-wash); }
.resume-cvflow-start .resume-entry-head { position: relative; z-index: 4; background: var(--cx-paper); }
.resume-start-stage { position: relative; min-height: calc(100vh - var(--topbar-h) - 64px); display: grid; grid-template-columns: 220px minmax(380px, 1fr); align-items: stretch; overflow: hidden; }
.resume-start-context { padding: 42px 28px; border-right: 1px solid var(--cv-rule); background: var(--cx-paper); }
.resume-start-context > span { color: var(--cx-ink60); font: 550 9px/1 var(--cx-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.resume-start-context h1 { margin: 14px 0 10px; font: 400 34px/1 var(--cx-font-display); }
.resume-start-context p { color: var(--cx-ink60); font: 400 12px/1.5 var(--cx-font-ui); }
.resume-start-context a { display: inline-block; margin-top: 18px; color: var(--cx-ink); font: 550 12px/1.2 var(--cx-font-ui); }
.resume-start-paper { display: grid; place-items: center; padding: 34px; overflow: hidden; background: var(--cv-wash); }
.resume-start-paper > div { width: min(560px, 62vw); aspect-ratio: 210 / 297; overflow: hidden; border: 1px solid var(--cv-rule); background: var(--cx-paper); box-shadow: 0 20px 60px color-mix(in srgb, var(--cx-ink) 13%, transparent); }
.resume-start-paper iframe { width: 794px; height: 1123px; border: 0; transform-origin: 0 0; transform: scale(.7); pointer-events: none; }
.resume-source-dialog { position: absolute; z-index: 3; top: 50%; left: calc(50% + 110px); width: min(540px, calc(100% - 280px)); padding: 28px; border: 1px solid var(--cx-ink); border-radius: 14px; background: color-mix(in srgb, var(--cx-paper) 97%, transparent); box-shadow: var(--cv-shadow); transform: translate(-50%, -50%); backdrop-filter: blur(16px); }
.resume-source-dialog h2 { max-width: 12ch; margin: 0; font: 400 42px/.98 var(--cx-font-display); letter-spacing: -.04em; }
.resume-source-dialog header p { margin: 10px 0 0; color: var(--cx-ink60); font: 400 13px/1.45 var(--cx-font-ui); }
.resume-source-options { display: grid; gap: 9px; margin-top: 24px; }
.resume-source-options > button { min-height: 72px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 13px; padding: 10px 13px; color: var(--cx-ink); text-align: left; border: 1px solid var(--cv-rule); border-radius: 9px; background: var(--cx-paper); }
.resume-source-options > button:hover { border-color: var(--cx-ink); transform: translateX(2px); }
.resume-source-options i { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--cv-rule); border-radius: 8px; background: var(--cv-wash); }
.resume-source-options svg { width: 18px; height: 18px; }
.resume-source-options b { display: block; font: 550 14px/1.2 var(--cx-font-ui); }
.resume-source-options small { display: block; margin-top: 5px; color: var(--cx-ink60); font: 400 10px/1.25 var(--cx-font-ui); }
.resume-source-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; color: var(--cx-ink60); font: 400 10px/1.2 var(--cx-font-ui); }

/* Intent-first welcome. This is deliberately a calm product threshold—not a
   template preview with a form floating over it. Content source is the only
   decision here; the complete designs arrive on the next screen. */
.resume-welcome { min-height: calc(100vh - var(--topbar-h)); background: var(--cx-paper); }
.resume-welcome-stage {
  position: relative;
  min-height: calc(100vh - var(--topbar-h) - 64px);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(440px, .78fr);
  align-items: center;
  gap: clamp(54px, 8vw, 130px);
  padding: clamp(58px, 7vw, 108px) clamp(34px, 7vw, 112px);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 55%, color-mix(in srgb, var(--cx-ink) 5%, transparent) 55% 55.08%, transparent 55.08%),
    radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--cx-ink) 4%, transparent), transparent 32%),
    var(--cx-paper);
}
.resume-welcome-stage::after {
  content: "01";
  position: absolute;
  right: clamp(30px, 5vw, 82px);
  bottom: -0.16em;
  color: color-mix(in srgb, var(--cx-ink) 4%, transparent);
  font: 400 clamp(150px, 20vw, 310px)/.8 var(--cx-font-display);
  pointer-events: none;
}
.resume-welcome-copy { position: relative; z-index: 1; align-self: center; }
.resume-welcome-copy h1 { max-width: 10ch; margin: 18px 0 22px; color: var(--cx-ink); font: 400 clamp(58px, 6.2vw, 92px)/.88 var(--cx-font-display); letter-spacing: -.055em; }
.resume-welcome-copy > p { max-width: 48ch; margin: 0; color: var(--cx-ink60); font: 400 15px/1.62 var(--cx-font-ui); }
.resume-welcome-proof { display: flex; gap: 0; margin-top: 46px; border-top: 1px solid var(--cv-rule-strong); border-bottom: 1px solid var(--cv-rule); }
.resume-welcome-proof > span { min-width: 120px; padding: 15px 24px 16px 0; }
.resume-welcome-proof > span + span { padding-left: 24px; border-left: 1px solid var(--cv-rule); }
.resume-welcome-proof b { display: block; font: 500 19px/1 var(--cx-font-display); }
.resume-welcome-proof small { display: block; margin-top: 6px; color: var(--cx-ink60); font: 500 9px/1.2 var(--cx-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.resume-welcome .resume-welcome-actions {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  width: 100%;
  padding: clamp(26px, 3vw, 38px);
  transform: none;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cx-paper) 98%, transparent);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--cx-ink) 10%, transparent);
}
.resume-welcome .resume-welcome-actions h2 { max-width: 13ch; font-size: clamp(40px, 3.7vw, 54px); }
.resume-welcome .resume-source-options > button { min-height: 82px; border-radius: 8px; }
.resume-welcome .resume-source-options > button:hover,
.resume-welcome .resume-source-options > button:focus-visible { border-color: var(--cx-ink); transform: translateX(3px); outline: none; }
.resume-welcome .resume-welcome-actions footer a { color: var(--cx-ink); font-weight: 600; text-underline-offset: 4px; }

/* Guided scratch build stays inside the studio and keeps the document alive. */
.resume-inline-onboarding { min-height: calc(100vh - var(--topbar-h)); background: var(--cx-paper); }
.resume-onboarding-layout { display: grid; grid-template-columns: minmax(520px, 1fr) clamp(420px, 38vw, 580px); min-height: calc(100vh - var(--topbar-h)); }
.resume-inline-onboarding .guided-main { width: auto; min-width: 0; padding: 0 clamp(32px, 4vw, 64px) 56px; border-right: 1px solid var(--cv-rule); }
.resume-inline-onboarding .guided-head { position: sticky; top: var(--topbar-h); z-index: 2; display: grid; grid-template-columns: 1fr minmax(180px, 260px); align-items: center; gap: 24px; margin: 0 calc(clamp(32px, 4vw, 64px) * -1) 38px; padding: 16px clamp(32px, 4vw, 64px); border-bottom: 1px solid var(--cv-rule); background: color-mix(in srgb, var(--cx-paper) 96%, transparent); backdrop-filter: blur(14px); }
.resume-inline-onboarding .wizard-form { width: min(100%, 760px); margin-inline: auto; }
.resume-inline-onboarding .wizard-form h1 { max-width: 13ch; font-size: clamp(40px, 4vw, 56px); }
.resume-inline-onboarding .guided-nav { width: min(100%, 760px); margin-inline: auto; }
.resume-onboarding-preview { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); padding: 16px; overflow: auto; background: var(--cv-wash); }
.resume-onboarding-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 12px; color: var(--cx-ink60); font: 500 10px/1 var(--cx-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.resume-onboarding-preview .document-frame,
.resume-onboarding-preview iframe { height: calc(100vh - var(--topbar-h) - 62px); min-height: 620px; }

@media (max-width: 1179px) and (min-width: 901px) {
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-layout { grid-template-columns: minmax(430px, 1fr) 350px !important; }
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-canvas { padding: 34px 32px 64px !important; }
  .resume-onboarding-layout { grid-template-columns: minmax(430px, 1fr) 350px; }
  .resume-inline-onboarding .guided-main { padding-inline: 30px; }
}

@media (max-width: 900px) {
  .resume-context-bar { min-height: 58px; gap: 10px; padding: 7px 12px; }
  .resume-context-bar > nav { flex: 1; }
  .resume-context-bar > nav > button { min-width: 0; flex: 1; min-height: 42px; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; padding: 5px 8px; }
  .resume-context-bar > nav > button small, .resume-context-bar > div > span { display: none; }
  .resume-context-bar > div { display: none; }
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-layout { display: block !important; padding: 0 !important; }
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-canvas { display: block !important; min-height: 0; padding: 30px 18px 130px !important; border: 0 !important; }
  body.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-preview { display: none !important; }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-layout { display: block !important; padding: 0 !important; }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-canvas { display: none !important; }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-design-canvas { display: block !important; min-height: 0; padding: 28px 18px 130px !important; overflow: visible !important; border: 0 !important; background: var(--cx-paper) !important; }
  body.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-preview { display: none !important; }
  .resume-content-overview > header { grid-template-columns: 40px 1fr; gap: 13px; margin-bottom: 24px; padding-bottom: 22px; }
  .resume-content-overview > header > span { width: 40px; height: 40px; }
  .resume-content-overview h1, .resume-focused-editor h1 { font-size: 40px; }
  .resume-content-entry { grid-template-columns: 38px minmax(0, 1fr) 16px; min-height: 70px; padding: 10px 12px; }
  .resume-content-entry > em { display: none; }
  .resume-content-entry > i { width: 36px; height: 36px; }
  .resume-content-entry small { white-space: normal; }
  .resume-focused-editor > footer { position: sticky; bottom: 0; z-index: 4; margin-inline: -18px; padding: 12px 18px; background: color-mix(in srgb, var(--cx-paper) 96%, transparent); backdrop-filter: blur(14px); }
  .resume-content-dialog > div { grid-template-columns: 1fr; }
  .resume-content-dialog > header, .resume-inline-import > header { padding: 22px 20px 18px; }
  .resume-content-dialog h2, .resume-inline-import h2 { font-size: 32px; }
  .resume-inline-import > nav, .resume-inline-import > section { padding-inline: 20px; }
  .resume-welcome-stage { min-height: 0; display: block; padding: 28px 18px 90px; overflow: visible; background: var(--cx-paper); }
  .resume-welcome-stage::after { display: none; }
  .resume-welcome-copy h1 { max-width: 11ch; margin-block: 10px 13px; font-size: clamp(44px, 12vw, 56px); }
  .resume-welcome-copy > p { font-size: 13px; line-height: 1.5; }
  .resume-welcome-proof { display: none; }
  .resume-welcome .resume-welcome-actions { margin-top: 24px; padding: 19px 18px; }
  .resume-welcome .resume-welcome-actions h2 { font-size: 32px; }
  .resume-welcome .resume-welcome-actions > p { margin-top: 8px; font-size: 12px; }
  .resume-welcome .resume-source-options { margin-top: 17px; gap: 8px; }
  .resume-welcome .resume-source-options > button { min-height: 66px; padding: 9px 11px; }
  .resume-welcome .resume-source-options i { width: 34px; height: 34px; }
  .resume-welcome .resume-source-options small { margin-top: 3px; font-size: 9px; }
  .resume-welcome .resume-welcome-actions footer { margin-top: 14px; }
  .resume-start-stage { min-height: calc(100vh - var(--topbar-h)); display: block; padding: 18px; overflow: visible; }
  .resume-start-context { display: none; }
  .resume-start-paper { min-height: 620px; padding: 0; opacity: .32; }
  .resume-start-paper > div { width: 100%; }
  .resume-start-paper iframe { transform: scale(.46); }
  .resume-source-dialog { position: absolute; top: 34px; left: 50%; width: calc(100% - 36px); padding: 22px 18px; transform: translateX(-50%); }
  .resume-source-dialog h2 { font-size: 38px; }
  .resume-source-dialog > footer { align-items: flex-start; }
  .resume-onboarding-layout { display: block; min-height: 0; }
  .resume-inline-onboarding .guided-main { padding: 0 18px 120px; border: 0; }
  body.folio-v5 .resume-inline-onboarding .guided-head { position: static; display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 -18px 28px; padding: 12px 18px 14px; }
  body.folio-v5 .resume-inline-onboarding .guided-head-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.folio-v5 .resume-inline-onboarding .guided-head-actions > button { width: 100%; min-width: 0; min-height: 42px; justify-content: center; padding-inline: 10px; white-space: nowrap; }
  body.folio-v5 .resume-inline-onboarding .guided-head-actions > button b { white-space: nowrap; }
  body.folio-v5 .resume-inline-onboarding .guided-progress { width: 100%; min-width: 0; display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .resume-onboarding-preview { display: none; }
}

@media (max-width: 820px) {
  body.folio-v5 .resume-designs-page { padding-top: 20px; }
  body.folio-v5 .resume-designs-hero { gap: 16px; padding-bottom: 18px; }
  body.folio-v5 .resume-designs-hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .resume-gallery-paths { margin-top: 13px; }
}

@media (max-width: 560px) {
  body.folio-v5 .resume-mobile-dock-actions { grid-template-columns: 1fr 1.15fr !important; }
  body.folio-v5 .resume-mobile-dock-actions > .resume-download-menu-mobile { grid-column: auto !important; }
  .resume-gallery-paths { grid-template-columns: 1fr; }
  .resume-gallery-paths > button { min-height: 58px; }
  .resume-template-choice { padding: 24px 18px 20px; }
  .resume-template-choice h2 { max-width: 11ch; font-size: 38px; }
  .resume-template-choice-options > button { min-height: 74px; }
  .resume-import-scan-state { margin-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .resume-content-entry,
  .resume-source-options > button { transition: none; }
}