@layer components {
    .cv-preview-header .cv-preview-name {
        margin: var(--hrc-space-0);
        color: var(--cv-accent);
        font-size: clamp(var(--hrc-text-xl), 4vw, var(--hrc-text-3xl));
        font-weight: var(--hrc-weight-extrabold);
        line-height: var(--hrc-leading-tight);
        overflow-wrap: anywhere;
    }

    .cv-template-classic .cv-preview-header .cv-preview-name {
        font-family: var(--hrc-font-serif, Georgia, serif);
    }

    .cv-template-minimal .cv-preview-header .cv-preview-name {
        color: var(--cv-ink);
    }

    .cv-visually-hidden {
        position: absolute !important;
        inline-size: 1px !important;
        block-size: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .cv-manager-head h2 {
        margin: var(--hrc-space-1) var(--hrc-space-0);
        font-size: var(--hrc-text-3xl);
    }

    @media (max-width: 899px) {
        .cv-manager-head h2 {
            font-size: var(--hrc-text-2xl);
        }
    }
}

/* Public CV Builder runtime readability.
 * Keep the editable application chrome on the active Design System theme while
 * preserving the CV sheet itself as a stable print preview. This block remains
 * unlayered so it can replace the older unlayered legacy bundle without
 * specificity escalation or theme-specific literals. */
body.hrc-design-system-v1.hrc-module-cv-builder {
    --cv-primary: var(--hrc-action-primary);
    --cv-primary-strong: var(--hrc-action-primary-hover);
    --cv-on-primary: var(--hrc-action-on-primary);
    --cv-ink: var(--hrc-color-text);
    --cv-muted: var(--hrc-color-text-muted);
    --cv-border: var(--hrc-color-border);
    --cv-surface: var(--hrc-color-surface);
    --cv-soft: var(--hrc-color-surface-soft);
    --cv-danger: var(--hrc-color-danger);
    --cv-success-ink: color-mix(in srgb, var(--hrc-color-success) 35%, var(--cv-ink));
    --cv-print-surface: var(--hrc-static-white);
    --cv-print-ink: var(--hrc-neutral-900);
    --cv-print-muted: var(--hrc-neutral-600);
}

body.hrc-design-system-v1.hrc-module-cv-builder #hrc-cv-builder-root {
    min-block-size: calc(100vh - (var(--hrc-space-12) * 2));
    min-block-size: calc(100svh - (var(--hrc-space-12) * 2));
}

body.hrc-design-system-v1.hrc-module-cv-builder #hrc-cv-builder-root > .cv-builder-loading {
    min-block-size: inherit;
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-builder-toolbar,
    .cv-editor-card,
    .cv-template-picker button,
    .cv-preset-card,
    .cv-section-editor,
    .cv-item-editor,
    .cv-field input,
    .cv-field textarea,
    .cv-secondary-button,
    .cv-modal,
    .cv-mobile-tabs
) {
    border-color: var(--cv-border);
    background: var(--cv-surface);
    color: var(--cv-ink);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-4) var(--hrc-space-5) var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-context {
    display: grid;
    gap: var(--hrc-space-1);
    margin: var(--hrc-space-4) var(--hrc-space-5) var(--hrc-space-0);
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: 1px solid var(--cv-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--cv-soft);
    color: var(--cv-ink);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-context strong {
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-context span {
    color: var(--cv-muted);
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-relaxed);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-4) var(--hrc-space-5) var(--hrc-space-0);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-filters button {
    min-block-size: var(--hrc-touch-target);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: 1px solid var(--cv-border);
    border-radius: var(--hrc-radius-pill);
    background: var(--cv-surface);
    color: var(--cv-ink);
    font: inherit;
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-filters button[aria-pressed="true"] {
    border-color: var(--cv-primary);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-filters button:focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-count {
    margin-inline-start: auto;
    color: var(--cv-muted);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-card {
    min-block-size: calc(var(--hrc-space-12) + var(--hrc-space-10));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon copy"
        "icon action";
    align-items: start;
    gap: var(--hrc-space-2) var(--hrc-space-3);
    padding: var(--hrc-space-3);
    border: 1px solid var(--cv-border);
    border-radius: var(--hrc-radius-xl);
    background: var(--cv-surface);
    color: var(--cv-ink);
    text-align: start;
    cursor: pointer;
    box-shadow: var(--hrc-shadow-xs);
    transition: border-color var(--hrc-motion-fast) var(--hrc-ease-standard), box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard), transform var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-card:hover {
    border-color: var(--cv-primary);
    box-shadow: var(--hrc-shadow-sm);
    transform: translateY(calc(var(--hrc-space-1) * -1));
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-card:focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-icon {
    grid-area: icon;
    inline-size: var(--hrc-space-10);
    block-size: var(--hrc-space-10);
    display: grid;
    place-items: center;
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: var(--hrc-tracking-eyebrow);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-copy {
    grid-area: copy;
    min-inline-size: 0;
    display: grid;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-copy strong {
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-copy small,
body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-copy > span,
body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-note {
    color: var(--cv-muted);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-copy small {
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-copy > span {
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-relaxed);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-copy em {
    color: var(--hrc-color-brand-hover);
    font-size: var(--hrc-text-xs);
    font-style: normal;
    font-weight: var(--hrc-weight-semibold);
    line-height: var(--hrc-leading-relaxed);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-action {
    grid-area: action;
    color: var(--hrc-color-brand-hover);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-2) var(--hrc-space-5) var(--hrc-space-4);
    color: var(--cv-muted);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-more button {
    min-block-size: var(--hrc-touch-target);
    padding: var(--hrc-space-2) var(--hrc-space-4);
    border: 1px solid var(--cv-primary);
    border-radius: var(--hrc-radius-pill);
    background: var(--cv-surface);
    color: var(--hrc-color-brand-hover);
    font: inherit;
    font-weight: var(--hrc-weight-bold);
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-more button:hover {
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-more button:focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
}

@media (min-width: 1200px) {
    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-note {
    margin: var(--hrc-space-0);
    padding: var(--hrc-space-0) var(--hrc-space-5) var(--hrc-space-5);
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-relaxed);
}

@media (max-width: 767px) {
    body.hrc-design-system-v1.hrc-module-cv-builder .cv-toolbar-actions .cv-primary-button {
        grid-column: auto;
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-library .cv-card-title {
        display: grid;
        align-items: start;
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-context {
        margin: var(--hrc-space-4) var(--hrc-space-4) var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-filters {
        padding-inline: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-count {
        inline-size: 100%;
        margin-inline-start: var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-card {
        min-block-size: calc(var(--hrc-space-12) + var(--hrc-space-10));
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-copy > span {
        -webkit-line-clamp: 1;
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-more {
        align-items: stretch;
        padding-inline: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-more span {
        align-self: center;
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-preset-note {
        padding: var(--hrc-space-0) var(--hrc-space-4) var(--hrc-space-4);
    }
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-section-editor > summary,
    .cv-item-editor,
    .cv-item-editor > header,
    .cv-preview-stage,
    .cv-empty-state
) {
    border-color: var(--cv-border);
    background: var(--cv-soft);
    color: var(--cv-ink);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-card-title,
    .cv-item-editor > header
) {
    border-color: var(--cv-border);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-builder-toolbar small,
    .cv-card-title small,
    .cv-field > span,
    .cv-design-row label,
    .cv-empty-state p
) {
    color: var(--cv-muted);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-builder-toolbar span,
    .cv-card-title span
) {
    color: var(--hrc-color-brand-hover);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-primary-button {
    border-color: var(--cv-primary);
    background: var(--cv-primary);
    color: var(--cv-on-primary);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-primary-button:hover {
    border-color: var(--cv-primary-strong);
    background: var(--cv-primary-strong);
    color: var(--cv-on-primary);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-add-button,
    .cv-template-picker button.active
) {
    border-color: var(--cv-primary);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-mobile-tabs button[aria-selected="true"] {
    background: var(--cv-primary);
    color: var(--cv-on-primary);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-section-actions button,
    .cv-icon-button,
    .cv-modal-close
) {
    border-color: var(--cv-border);
    background: var(--cv-surface);
    color: var(--cv-ink);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-alert,
    .cv-modal-icon,
    .cv-default-chip
) {
    border-color: var(--hrc-color-success);
    background: var(--hrc-color-success-soft);
    color: var(--cv-success-ink);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-alert.error,
    .cv-icon-button.danger,
    .cv-photo-control button
) {
    border-color: var(--hrc-color-danger);
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-photo-field {
    min-inline-size: 0;
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-field-grid {
    align-items: start;
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-photo-field .cv-alert {
    display: block;
    margin-block: var(--hrc-space-2);
    overflow-wrap: anywhere;
    font-size: var(--hrc-text-sm);
    line-height: var(--hrc-leading-normal);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(.cv-field input, .cv-field textarea)::placeholder {
    color: color-mix(in srgb, var(--cv-muted) 82%, var(--cv-ink));
    opacity: 1;
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-a4 {
    background: var(--cv-print-surface);
    color: var(--cv-print-ink);
}

body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-preview-header p,
    .cv-preview-item-head time,
    .cv-preview-section article small,
    .cv-preview-empty
) {
    color: var(--cv-print-muted);
}

body.hrc-design-system-v1.hrc-module-cv-builder .cv-template-minimal .cv-preview-header .cv-preview-name,
body.hrc-design-system-v1.hrc-module-cv-builder .cv-template-minimal .cv-preview-section h3 {
    color: var(--cv-print-ink);
}

/* Public shell ownership. Account editors and the printable CV remain unchanged.
 * Bridge the legacy canvas variables instead of competing with its important
 * background declaration. All visible chrome resolves from Foundation tokens. */
body.hrc-design-system-v1.hrc-family-public.hrc-module-cv-builder {
    --base-bg: var(--hrc-color-bg-app);
    --tcv-bg: var(--hrc-color-bg-app);
    --ai-bg: var(--hrc-color-bg-app);
    --ai-surface: var(--hrc-color-surface);
    --ai-text: var(--hrc-color-text);
    --ai-muted: var(--hrc-color-text-muted);
}

body.hrc-family-public.hrc-module-cv-builder .cv-public-main {
    gap: var(--hrc-space-4);
    padding-block: var(--hrc-space-4) var(--hrc-space-8);
}

body.hrc-family-public.hrc-module-cv-builder .cv-public-intro.hrc-hero {
    gap: var(--hrc-space-4);
    margin-block: var(--hrc-space-0);
    padding: var(--hrc-responsive-panel-padding, var(--hrc-space-5));
    background: var(--hrc-color-surface);
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    box-shadow: none;
}

body.hrc-family-public.hrc-module-cv-builder .cv-public-intro > div {
    display: grid;
    gap: var(--hrc-space-2);
    min-inline-size: 0;
}

body.hrc-family-public.hrc-module-cv-builder .cv-public-intro > div > span {
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
    color: var(--hrc-color-text-muted);
}

body.hrc-family-public.hrc-module-cv-builder .cv-public-intro h1 {
    margin: var(--hrc-space-0);
    font-size: var(--hrc-responsive-hero-title-size, var(--hrc-text-2xl));
    font-weight: var(--hrc-weight-bold);
    line-height: var(--hrc-leading-tight);
    color: var(--hrc-color-text);
    overflow-wrap: anywhere;
}

body.hrc-family-public.hrc-module-cv-builder .cv-public-intro p {
    margin: var(--hrc-space-0);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-regular);
    line-height: var(--hrc-leading-relaxed);
    color: var(--hrc-color-text-muted);
}

body.hrc-family-public.hrc-module-cv-builder .cv-public-intro > ul {
    gap: var(--hrc-space-1);
    font-size: var(--hrc-text-sm);
    line-height: var(--hrc-leading-relaxed);
    color: var(--hrc-color-text-muted);
}

body.hrc-family-public.hrc-module-cv-builder .cv-builder-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-3);
    border-radius: var(--hrc-radius-md);
    box-shadow: none;
    backdrop-filter: none;
    top: calc(var(--hrc-public-header-height, calc(var(--hrc-space-8) * 2)) + var(--hrc-space-2));
}

/* Reserve space while booting, not after a short mobile preview has loaded. */
body.hrc-design-system-v1.hrc-family-public.hrc-module-cv-builder #hrc-cv-builder-root:has(> .cv-builder) {
    min-block-size: 0;
}

body.hrc-family-public.hrc-module-cv-builder .cv-mobile-tabs,
body.hrc-family-public.hrc-module-cv-builder .cv-builder-pane.preview {
    top: calc(var(--hrc-public-header-height, calc(var(--hrc-space-8) * 2)) + var(--hrc-space-2));
}

@media (min-width: 1200px) {
    body.hrc-family-public.hrc-module-cv-builder .cv-builder-pane.preview {
        top: calc(var(--hrc-public-header-height, calc(var(--hrc-space-8) * 2)) + var(--cv-public-toolbar-block-size, calc(var(--hrc-space-12) * 2)) + var(--hrc-space-4));
    }
}

body.hrc-family-public.hrc-module-cv-builder .cv-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hrc-space-2);
    inline-size: 100%;
    min-inline-size: 0;
}

body.hrc-design-system-v1.hrc-family-public.hrc-module-cv-builder .cv-toolbar-actions > button {
    grid-column: auto;
    min-inline-size: 0;
    padding-inline: var(--hrc-space-3);
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    body.hrc-family-public.hrc-module-cv-builder .cv-toolbar-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    body.hrc-family-public.hrc-module-cv-builder .cv-builder-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.hrc-family-public.hrc-module-cv-builder .cv-toolbar-actions {
        grid-template-columns: repeat(4, auto);
    }
}

body.hrc-family-public.hrc-module-cv-builder .cv-builder-toolbar :is(.cv-primary-button, .cv-secondary-button) {
    font-weight: var(--hrc-weight-semibold);
    box-shadow: none;
}

/* The authenticated portal includes a sidebar: size the editor against its
   available container, not the browser width or the printable A4 sheet. */
body.community-portal.hrc-module-cv-builder #hrc-cv-builder-root{container-type:inline-size}
@container (max-width:1000px){
 body.community-portal.hrc-module-cv-builder .cv-builder-grid{grid-template-columns:minmax(0,1fr)}
 body.community-portal.hrc-module-cv-builder .cv-builder-toolbar{display:flex;flex-direction:column;align-items:stretch}
 body.community-portal.hrc-module-cv-builder .cv-toolbar-actions{display:flex;flex-wrap:wrap;justify-content:flex-start}
 body.community-portal.hrc-module-cv-builder .cv-builder-pane.preview{position:static}
}

/* Dark-theme semantic foregrounds for interactive CV Builder chrome. */
html[data-theme="dark"] body.hrc-design-system-v1.hrc-module-cv-builder {
    --cv-brand-readable: var(--hrc-brand-300, var(--hrc-color-primary));
}

html[data-theme="dark"] body.hrc-design-system-v1.hrc-module-cv-builder .cv-public-intro > div > span {
    color: var(--cv-muted) !important;
}

html[data-theme="dark"] body.hrc-design-system-v1.hrc-module-cv-builder :is(
    .cv-preset-filters button[aria-pressed="true"],
    .cv-preset-icon,
    .cv-preset-copy em,
    .cv-preset-action,
    .cv-preset-more button,
    .cv-builder-toolbar span,
    .cv-card-title span,
    .cv-add-button,
    .cv-template-picker button.active
) {
    color: var(--cv-brand-readable) !important;
}

body.hrc-module-cv-builder .cv-builder-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hrc-space-2);
    margin-block-end: var(--hrc-space-3);
}

body.hrc-module-cv-builder .cv-builder-steps button {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-2);
    min-block-size: 44px;
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: 1px solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    font: inherit;
    font-weight: var(--hrc-weight-semibold);
    text-align: start;
}

body.hrc-module-cv-builder .cv-builder-steps button span {
    display: grid;
    flex: 0 0 28px;
    inline-size: 28px;
    block-size: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--hrc-color-surface-soft);
}

body.hrc-module-cv-builder .cv-builder-steps button[aria-current="step"] {
    border-color: var(--hrc-color-brand);
    color: var(--hrc-color-brand);
}

body.hrc-module-cv-builder .cv-builder-steps button[aria-current="step"] span {
    background: var(--hrc-color-brand);
    color: var(--hrc-color-on-brand);
}

body.hrc-module-cv-builder .cv-editor[data-current-step="1"] [data-cv-step-panel]:not([data-cv-step-panel="1"]),
body.hrc-module-cv-builder .cv-editor[data-current-step="2"] [data-cv-step-panel]:not([data-cv-step-panel="2"]),
body.hrc-module-cv-builder .cv-editor[data-current-step="3"] [data-cv-step-panel]:not([data-cv-step-panel="3"]) {
    display: none;
}

body.hrc-module-cv-builder .cv-step-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding-block: var(--hrc-space-2) var(--hrc-space-4);
}

@media (max-width: 640px) {
    body.hrc-module-cv-builder .cv-builder-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.hrc-module-cv-builder .cv-builder-steps button {
        flex-direction: column;
        justify-content: center;
        gap: var(--hrc-space-1);
        min-block-size: 68px;
        padding: var(--hrc-space-2);
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
    }

    body.hrc-module-cv-builder .cv-step-actions > button {
        flex: 1 1 0;
        min-inline-size: 0;
    }
}