/* ============================================================
   ApplyRaft — CV Builder
   ------------------------------------------------------------
   Self-contained stylesheet for /builder/*. It carries its own
   --ar-* token set (identical values to the marketing app.css)
   and its own @font-face declarations, so the builder no longer
   loads app.css and the two token systems can never fight again.

   Loaded AFTER Bootstrap 5.3 from CDN — Bootstrap supplies the
   grid, modal, collapse and form-check mechanics only; every
   visual decision below overrides it.
   ============================================================ */

/* ------------------------------------------------------------
   Typeface — Plus Jakarta Sans, self-hosted variable woff2.
   Same two files the marketing stylesheet declares.
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans[wght].woff2') format('woff2-variations'),
         url('/fonts/PlusJakartaSans[wght].woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Italic[wght].woff2') format('woff2-variations'),
         url('/fonts/PlusJakartaSans-Italic[wght].woff2') format('woff2');
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */
:root {
    /* Palette */
    --ar-bg:           #F2F1ED;
    --ar-ink:          #10233A;
    --ar-body:         #4A5568;
    --ar-body-strong:  #35435A;
    --ar-muted:        #94A0B0;   /* decorative / >=18px bold only */
    --ar-line:         #E2DFD8;
    --ar-line-soft:    #EDEBE5;
    --ar-accent:       #2F6BF0;
    --ar-accent-ink:   #1E4FBF;
    --ar-accent-soft:  #E8F0FE;
    --ar-success:      #16A34A;
    --ar-success-soft: #E7F6EC;
    --ar-danger:       #B42318;
    --ar-danger-soft:  #FDF0EE;
    --ar-surface:      #FFFFFF;
    --ar-surface-soft: #F7F6F2;

    /* Type */
    --ar-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, sans-serif;
    --ar-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* Space */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px;

    /* Shape */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;

    /* Elevation — used sparingly. The A4 sheet is the only thing
       that gets a real, physical shadow. */
    --sheet-shadow: 0 1px 2px rgba(16,35,58,.06),
                    0 18px 40px -22px rgba(16,35,58,.35);
    --pop-shadow:   0 10px 34px -16px rgba(16,35,58,.40);

    --ar-topbar: 56px;

    /* Live A4 preview scale. The template HTML always renders at a
       true 794px A4 width; we scale the whole sheet down by a fixed
       factor per breakpoint (no JS measuring, no layout thrash). */
    --preview-scale: .60;
    --fin-scale: .78;

    /* Bootstrap bridge — keep framework components on our palette. */
    --bs-primary: #2F6BF0;
    --bs-primary-rgb: 47, 107, 240;
    --bs-link-color: #2F6BF0;
    --bs-link-color-rgb: 47, 107, 240;
    --bs-link-hover-color: #1E4FBF;
    --bs-border-color: #E2DFD8;
    --bs-body-color: #10233A;
    --bs-body-font-family: var(--ar-font);
    --bs-border-radius: 10px;
    --bs-focus-ring-color: rgba(47,107,240,.28);
}

@media (max-width: 1439.98px) { :root { --preview-scale: .50; --fin-scale: .62; } }
@media (max-width: 1199.98px) { :root { --preview-scale: .42; --fin-scale: .52; } }
@media (max-width:  991.98px) { :root { --fin-scale: .55; } }
@media (max-width:  767.98px) { :root { --fin-scale: .42; } }
@media (max-width:  575.98px) { :root { --fin-scale: .34; } }

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
.builder-body {
    background: var(--ar-bg);
    color: var(--ar-ink);
    font-family: var(--ar-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.builder-main { display: block; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -60px;
    z-index: 200;
    background: var(--ar-ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--r-md);
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-link:focus { top: 10px; color: #fff; }

:focus-visible {
    outline: 3px solid var(--ar-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ------------------------------------------------------------
   Icons
   ------------------------------------------------------------
   The builder no longer loads the Bootstrap Icons font from a CDN.
   The two dozen glyphs it actually uses are drawn here as a single
   monoline set (16×16, 1.5px stroke) and applied as CSS masks, so
   they take `currentColor` and need no font file. The `bi-*` class
   names are kept on purpose: builder.js injects
   `<i class="bi bi-person">` when a photo is removed, and the shared
   partials/alerts.blade.php uses four of them.
   ------------------------------------------------------------ */
.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: var(--bi) center / contain no-repeat;
            mask: var(--bi) center / contain no-repeat;
}

.bi-search             { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.3 10.3 14 14'/%3E%3C/svg%3E"); }
.bi-check-lg           { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
.bi-x-lg               { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E"); }
.bi-plus-lg            { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 2.5v11M2.5 8h11'/%3E%3C/svg%3E"); }
.bi-chevron-down       { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); }
.bi-list-ul            { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5.5 4h8M5.5 8h8M5.5 12h8M2.3 4h.01M2.3 8h.01M2.3 12h.01'/%3E%3C/svg%3E"); }
.bi-trash3             { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h11M6 4.5V3h4v1.5M3.8 4.5l.7 9h7l.7-9M6.5 7.5v4M9.5 7.5v4'/%3E%3C/svg%3E"); }
.bi-lightbulb          { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.3 10.3a4.2 4.2 0 1 1 5.4 0c-.5.5-.8 1-.8 1.7H6.1c0-.7-.3-1.2-.8-1.7zM6.3 14h3.4'/%3E%3C/svg%3E"); }
.bi-inbox              { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 9.5 3.2 4h9.6l1.7 5.5v4h-13zM1.5 9.5h3.2l1 2h4.6l1-2h3.2'/%3E%3C/svg%3E"); }
.bi-file-earmark-text  { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 1.5h5.5L13 5v9.5H4zM9.5 1.5V5H13M6 8.5h4M6 11h4'/%3E%3C/svg%3E"); }
.bi-files              { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 4.5h7v9h-7zM3.5 11.5v-9h7'/%3E%3C/svg%3E"); }
.bi-person             { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5.3' r='2.8'/%3E%3Cpath d='M2.8 14c.6-3 2.8-4.3 5.2-4.3s4.6 1.3 5.2 4.3'/%3E%3C/svg%3E"); }
.bi-cloud-check        { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.5h6.9a2.9 2.9 0 0 0 .4-5.8A4 4 0 0 0 4.3 7.6a2.5 2.5 0 0 0 .3 4.9zM6 9.6l1.5 1.4 2.6-2.7'/%3E%3C/svg%3E"); }
.bi-cloud-arrow-up     { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 11.5h1.2M10.2 11.5h1.3a2.9 2.9 0 0 0 .4-5.8A4 4 0 0 0 4.3 6.6a2.5 2.5 0 0 0 .3 4.9M8 14V8.5m-2 2 2-2 2 2'/%3E%3C/svg%3E"); }
.bi-clock-history      { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E"); }
.bi-question-circle    { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M6.1 6.3a2 2 0 1 1 2.8 1.8c-.6.3-.9.7-.9 1.3M8 11.6h.01'/%3E%3C/svg%3E"); }
.bi-check-circle-fill  { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M5.2 8.2l1.9 1.9 3.8-4'/%3E%3C/svg%3E"); }
.bi-exclamation-circle-fill { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6v4M8 11.3h.01'/%3E%3C/svg%3E"); }
.bi-exclamation-triangle-fill { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.3 14.3 13.3H1.7zM8 6.2v3.3M8 11.6h.01'/%3E%3C/svg%3E"); }
.bi-info-circle-fill   { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 7.2v4.2M8 4.8h.01'/%3E%3C/svg%3E"); }
.bi-linkedin           { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='12' height='12' rx='2.2'/%3E%3Cpath d='M5.3 7v4.4M5.3 4.9h.01M8.2 11.4V7m0 1.3c.6-1.1 3.2-1.4 3.2.6v2.5'/%3E%3C/svg%3E"); }
.bi-box-arrow-up-right { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5H3.5v9h9V9.5M8.5 7.5 13 3m0 0H9.5M13 3v3.5'/%3E%3C/svg%3E"); }
.bi-link-45deg         { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l3-3M8.9 4.6l1.3-1.3a2.5 2.5 0 0 1 3.5 3.5l-1.3 1.3M7.1 11.4l-1.3 1.3a2.5 2.5 0 0 1-3.5-3.5l1.3-1.3'/%3E%3C/svg%3E"); }
.bi-envelope-paper     { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 8 2.5l5.5 4v7h-11zM2.5 6.5 8 10l5.5-3.5'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------
   Top bar
   ------------------------------------------------------------ */
.builder-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--ar-topbar);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 var(--sp-6);
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--ar-line);
}
.builder-brand {
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
    color: var(--ar-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.builder-brand:hover { color: var(--ar-accent-ink); }
.builder-brand-mark {
    width: 22px; height: 22px;
    border-radius: 7px;
    background: var(--ar-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 800;
}

.builder-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

/* Draft status — deliberately neutral. An amber warning icon on every
   page load told guests something was wrong when nothing was. */
.draft-note {
    font-size: .8125rem;
    color: var(--ar-body);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.draft-note .bi { color: var(--ar-muted); font-size: .95rem; }
.draft-note--saved .bi { color: var(--ar-success); }

.topbar-link {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ar-body);
    text-decoration: none;
    white-space: nowrap;
}
.topbar-link:hover { color: var(--ar-ink); text-decoration: underline; }

@media (max-width: 767.98px) {
    .builder-topbar { padding: 0 var(--sp-4); gap: var(--sp-3); }
    .builder-topbar-right { gap: var(--sp-3); }
}

/* ------------------------------------------------------------
   Flash messages
   ------------------------------------------------------------ */
.builder-alerts {
    max-width: 1560px;
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-8) 0;
}
.builder-alerts .alert {
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    background: var(--ar-surface);
    color: var(--ar-ink);
    font-size: .9375rem;
    box-shadow: none;
}
.builder-alerts .alert-success { border-left: 3px solid var(--ar-success); }
.builder-alerts .alert-danger  { border-left: 3px solid var(--ar-danger); }
.builder-alerts .alert-warning { border-left: 3px solid #B45309; }
.builder-alerts .alert-info    { border-left: 3px solid var(--ar-accent); }
.builder-alerts .alert-link    { color: var(--ar-accent-ink); }

/* ------------------------------------------------------------
   Two-pane shell
   ------------------------------------------------------------ */
.builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 552px;
    gap: var(--sp-8);
    align-items: start;
    max-width: 1560px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-8) var(--sp-16);
}

.builder-form-panel {
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-xl);
    padding: var(--sp-8) var(--sp-10) var(--sp-10);
    min-width: 0;
}

.builder-preview-panel {
    position: sticky;
    top: calc(var(--ar-topbar) + var(--sp-6));
    max-height: calc(100vh - var(--ar-topbar) - var(--sp-12));
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}

@media (max-width: 1439.98px) {
    .builder-grid { grid-template-columns: minmax(0, 1fr) 476px; gap: var(--sp-6); }
    .builder-form-panel { padding: var(--sp-8); }
}
@media (max-width: 1199.98px) {
    .builder-grid { grid-template-columns: minmax(0, 1fr) 408px; padding: var(--sp-5) var(--sp-6) var(--sp-16); }
}
@media (max-width: 1023.98px) {
    .builder-grid {
        grid-template-columns: 1fr;
        padding: var(--sp-4) var(--sp-4) 132px; /* clearance for the fixed action bar */
    }
    .builder-form-panel {
        padding: var(--sp-6) var(--sp-5) var(--sp-8);
        border-radius: var(--r-lg);
    }
    .builder-preview-panel { display: none; }
}

/* ------------------------------------------------------------
   Step rail
   ------------------------------------------------------------ */
.progress-rail {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin: 0 0 var(--sp-8);
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.progress-rail::-webkit-scrollbar { display: none; }

.progress-step {
    flex: 1 1 0;
    min-width: 98px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    text-decoration: none;
    background: none;
    border: 0;
}
.progress-step .progress-track {
    height: 3px;
    border-radius: var(--r-full);
    background: var(--ar-line);
    transition: background .2s ease;
}
.progress-step .progress-label {
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: -.005em;
    color: var(--ar-muted);
    font-weight: 500;
    padding-right: var(--sp-3);
    transition: color .2s ease;
}
.progress-step .progress-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-right: 5px;
    color: inherit;
}

.progress-step.completed .progress-track { background: var(--ar-ink); }
.progress-step.completed .progress-label { color: var(--ar-body); }
a.progress-step:hover .progress-label { color: var(--ar-ink); }
a.progress-step:hover .progress-track { background: var(--ar-accent-ink); }

.progress-step.active .progress-track { background: var(--ar-accent); height: 3px; }
.progress-step.active .progress-label { color: var(--ar-ink); font-weight: 700; }

.progress-step.pending .progress-track { background: var(--ar-line); }

@media (max-width: 767.98px) {
    .progress-step { min-width: 52px; }
    .progress-step .progress-label { font-size: .6875rem; }
    /* Only the step you're on keeps its name; the rest stay as numbered bars. */
    .progress-step:not(.active) .progress-name { display: none; }
    .progress-step:not(.active) .progress-num { margin-right: 0; }
}

/* ------------------------------------------------------------
   Step heading + copy
   ------------------------------------------------------------ */
.step-heading {
    font-size: 2rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--ar-ink);
    margin: 0 0 var(--sp-3);
    text-wrap: balance;
}
.step-subtext {
    color: var(--ar-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 58ch;
    margin: 0 0 var(--sp-8);
}
.step-subtext:last-of-type { margin-bottom: var(--sp-8); }

@media (max-width: 575.98px) {
    .step-heading { font-size: 1.625rem; }
    .step-subtext { font-size: 1rem; }
}

/* A quiet, indented aside used for escape hatches and reassurance. */
.step-note {
    border-left: 2px solid var(--ar-line);
    padding: 2px 0 2px var(--sp-4);
    margin: 0 0 var(--sp-8);
    color: var(--ar-body);
    font-size: .9375rem;
    line-height: 1.6;
    max-width: 62ch;
}
.step-note strong { color: var(--ar-ink); font-weight: 700; }

.section-rule {
    border: 0;
    border-top: 1px solid var(--ar-line);
    margin: var(--sp-10) 0 var(--sp-8);
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn-applyraft,
.btn-ghost,
.btn-danger-soft {
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 700;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: 0 var(--sp-6);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, filter .15s ease;
}

.btn-applyraft {
    background: var(--ar-ink);
    color: #fff;
    border: 1.5px solid var(--ar-ink);
}
.btn-applyraft:hover { filter: brightness(1.22); color: #fff; }
.btn-applyraft:active { transform: translateY(1px); }
.btn-applyraft:disabled,
.btn-applyraft.disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; }

.btn-ghost {
    background: transparent;
    color: var(--ar-ink);
    border: 1.5px solid var(--ar-line);
}
.btn-ghost:hover { background: rgba(16,35,58,.05); color: var(--ar-ink); border-color: var(--ar-body-strong); }

.btn-danger-soft {
    background: transparent;
    color: var(--ar-danger);
    border: 1.5px solid transparent;
    min-height: 44px;
    padding: 0 var(--sp-3);
    font-size: .875rem;
}
.btn-danger-soft:hover { background: var(--ar-danger-soft); border-color: rgba(180,35,24,.28); }

/* Small, honest text link — used for demoted/destructive actions. */
.link-quiet {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .8125rem;
    color: var(--ar-body);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.link-quiet:hover { color: var(--ar-ink); }
.link-quiet--danger { color: var(--ar-danger); }
.link-quiet--danger:hover { color: #8C1B12; }

.btn-icon {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ar-body);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.btn-icon:hover { background: var(--ar-surface-soft); color: var(--ar-ink); }

/* Bootstrap component bridge */
.btn { font-family: inherit; border-radius: var(--r-md); font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--ar-ink);
    --bs-btn-border-color: var(--ar-ink);
    --bs-btn-hover-bg: #1B3554;
    --bs-btn-hover-border-color: #1B3554;
    --bs-btn-active-bg: #0B1A2C;
    --bs-btn-active-border-color: #0B1A2C;
    --bs-btn-disabled-bg: var(--ar-ink);
    --bs-btn-disabled-border-color: var(--ar-ink);
}
.btn-outline-primary {
    --bs-btn-color: var(--ar-accent-ink);
    --bs-btn-border-color: var(--ar-line);
    --bs-btn-hover-bg: var(--ar-accent-soft);
    --bs-btn-hover-border-color: var(--ar-accent);
    --bs-btn-hover-color: var(--ar-accent-ink);
    --bs-btn-active-bg: var(--ar-accent-soft);
    --bs-btn-active-border-color: var(--ar-accent);
    --bs-btn-active-color: var(--ar-accent-ink);
}
.btn-link { --bs-btn-color: var(--ar-accent-ink); --bs-btn-hover-color: var(--ar-ink); font-weight: 600; }

/* ------------------------------------------------------------
   Step navigation
   ------------------------------------------------------------ */
.step-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ar-line);
    flex-wrap: wrap;
}
.step-nav .nav-spacer { flex: 1 1 auto; }

.step1-continue-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-4);
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ar-line);
}
/* Never grey out Continue without saying, in words, what's missing. */
.step1-continue-hint {
    display: none;
    margin: 0 auto 0 0;
    font-size: .875rem;
    color: var(--ar-body);
}
.step1-continue-row:has(#step1-continue:disabled) .step1-continue-hint { display: block; }

/* On mobile the Back / Next pair becomes a persistent bottom bar. */
@media (max-width: 1023.98px) {
    .step-nav,
    .step1-continue-row {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 95;
        margin: 0;
        padding: var(--sp-3) var(--sp-4)
                 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--ar-line);
        flex-wrap: nowrap;
    }
    .step-nav .btn-applyraft,
    .step1-continue-row .btn-applyraft { flex: 1 1 auto; }
    .step-nav .btn-ghost { padding: 0 var(--sp-4); }
    /* The Preview button docks into this bar's row (see .preview-fab), so
       the Next button leaves it a 108px slot plus a 12px gap. Only on steps
       that actually render the preview button — the cover letter has none. */
    body:has(.preview-fab) .step-nav .btn-applyraft,
    body:has(.preview-fab) .step1-continue-row .btn-applyraft { margin-right: 120px; }
    .step1-continue-row:has(#step1-continue:disabled) .step1-continue-hint { display: none; }
}

/* ------------------------------------------------------------
   Form controls
   ------------------------------------------------------------ */
.field-row { margin-bottom: var(--sp-5); }

.form-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .005em;
    color: var(--ar-ink);
    margin-bottom: 6px;
}
.form-label .required-mark { color: var(--ar-danger); font-weight: 700; }
.form-label .optional-mark { color: var(--ar-body); font-weight: 500; }

.form-control,
.form-select,
#skill-input {
    font-family: inherit;
    font-size: .9375rem;
    color: var(--ar-ink);
    background: var(--ar-surface);
    border: 1.5px solid var(--ar-line);
    border-radius: var(--r-md);
    min-height: 48px;
    padding: 11px 14px;
    width: 100%;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control::placeholder { color: var(--ar-muted); }
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: #D3CFC6; }

.form-control:focus,
.form-select:focus,
#skill-input:focus {
    outline: none;
    border-color: var(--ar-accent);
    box-shadow: 0 0 0 3px rgba(47,107,240,.18);
    background: var(--ar-surface);
    color: var(--ar-ink);
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--ar-danger);
    background-image: none;
    padding-right: 14px;
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(180,35,24,.16); }
.form-control:disabled,
.form-select:disabled {
    background: var(--ar-surface-soft);
    color: var(--ar-muted);
    cursor: not-allowed;
}

textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.6; }

.form-select {
    background-position: right 12px center;
    padding-right: 38px;
}

.field-help {
    margin-top: 6px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ar-body);
}
.field-error {
    margin-top: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ar-danger);
    display: none;
}
.is-invalid ~ .field-error,
.position-relative:has(.is-invalid) ~ .field-error,
[aria-invalid="true"] ~ .field-error,
.position-relative:has([aria-invalid="true"]) ~ .field-error { display: block; }

.validity-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95rem;
    display: none;
    pointer-events: none;
}
.validity-icon.show { display: inline-flex; }
.validity-icon.valid { color: var(--ar-success); }
.validity-icon.invalid { color: var(--ar-danger); }

/* Checkboxes / switches */
.form-check-input {
    width: 1.15em; height: 1.15em;
    margin-top: .18em;
    border: 1.5px solid #CFCAC0;
    background-color: #fff;
}
.form-check-input:checked {
    background-color: var(--ar-accent);
    border-color: var(--ar-accent);
}
.form-check-input:focus {
    border-color: var(--ar-accent);
    box-shadow: 0 0 0 3px rgba(47,107,240,.18);
}
.form-check-label { font-size: .9375rem; color: var(--ar-ink); }

/* Opt-out blocks ("I don't have paid work experience yet") */
.no-history-toggle {
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-10);
    margin-bottom: var(--sp-6);
}
.no-history-toggle .form-check-input { margin-left: -26px; }
.no-history-toggle .form-check-label { font-weight: 600; }
.no-history-toggle p { color: var(--ar-body); font-size: .875rem; line-height: 1.55; }

/* Optional, region-specific fields are disclosed, not displayed. */
.regional-fields { margin: var(--sp-2) 0 var(--sp-4); }

.char-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: .75rem;
    color: var(--ar-muted);
    background: rgba(255,255,255,.9);
    padding: 0 4px;
    border-radius: 4px;
    pointer-events: none;
}
.char-counter.over { color: var(--ar-danger); font-weight: 700; }

/* Disclosure toggles ("See example summaries", "Regional fields") */
.disclosure-toggle {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ar-accent-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.disclosure-toggle:hover { color: var(--ar-ink); }
.disclosure-toggle .bi { font-size: .95rem; }

/* ------------------------------------------------------------
   Guidance — the prompt is always there; examples open on demand.
   One <details> does both jobs: on desktop the prompt reads in full
   and "Examples" sits at the end of the line; on mobile the closed
   state clamps the prompt to one line and opening reveals it whole.
   ------------------------------------------------------------ */
.guide {
    margin: 0 0 var(--sp-5);
    padding: 0 0 0 var(--sp-4);
    border-left: 2px solid var(--ar-accent);
}
.guide-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--sp-2);
}
.guide-details { margin: 0; }
.guide-summary {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    cursor: pointer;
}
.guide-summary::-webkit-details-marker { display: none; }
.guide-summary:focus-visible { outline-offset: 4px; }
.guide-prompt {
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ar-ink);
    max-width: 62ch;
    margin: 0;
}
.guide-prompt--only { padding: 2px 0; }
.guide-toggle {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ar-accent-ink);
    white-space: nowrap;
}
.guide-toggle-close { display: none; }
.guide-details[open] .guide-toggle-open  { display: none; }
.guide-details[open] .guide-toggle-close { display: inline; }
.guide-body { padding: var(--sp-3) 0 2px; }
.guide-examples {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.guide-examples li {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ar-body);
    padding: var(--sp-2) var(--sp-3);
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-md);
    max-width: 68ch;
}
.guide-verbs { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.guide-verbs-label { font-size: .75rem; font-weight: 600; color: var(--ar-body); margin-right: 4px; }
.guide-verb {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ar-ink);
    padding: 3px 9px;
    border: 1px solid var(--ar-line);
    border-radius: var(--r-full);
}

/* Before → after translation table. Two columns that read as one line
   per pair; on narrow screens each pair stacks with the "after" indented. */
.guide-translate {
    margin: var(--sp-4) 0 0;
    border: 1px solid var(--ar-line);
    border-radius: var(--r-md);
    background: var(--ar-surface);
    overflow: hidden;
}
.guide-translate-head,
.guide-translate-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--sp-4);
    padding: 8px var(--sp-3);
}
.guide-translate-head {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ar-body);
    background: var(--ar-surface-soft);
    border-bottom: 1px solid var(--ar-line);
}
.guide-translate-list { margin: 0; }
.guide-translate-row + .guide-translate-row { border-top: 1px solid var(--ar-line-soft); }
.guide-translate-row dt {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ar-body);
    margin: 0;
}
.guide-translate-row dd {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ar-ink);
    margin: 0;
    line-height: 1.45;
}
.guide-translate-origin {
    margin: 0;
    padding: 8px var(--sp-3) 4px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--ar-body);
    border-top: 1px solid var(--ar-line);
}
.guide-translate-more > summary {
    list-style: none;
    cursor: pointer;
    padding: 9px var(--sp-3);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ar-accent-ink);
    border-top: 1px solid var(--ar-line);
    background: var(--ar-surface-soft);
}
.guide-translate-more > summary::-webkit-details-marker { display: none; }
.guide-translate-more-close { display: none; }
.guide-translate-more[open] > summary .guide-translate-more-open  { display: none; }
.guide-translate-more[open] > summary .guide-translate-more-close { display: inline; }
.guide-translate-more[open] > summary { border-bottom: 1px solid var(--ar-line); }

@media (max-width: 575.98px) {
    .guide-translate-head { display: none; }
    .guide-translate-row { grid-template-columns: 1fr; row-gap: 2px; }
    .guide-translate-row dd::before { content: "→ "; color: var(--ar-accent); font-weight: 700; }
}

/* Which audience's tips show: the form's own `audience` field decides,
   in CSS, so the switch is instant and needs no script. */
.guide-variant { display: none; }
.guide-variant[data-audience="general"] { display: block; }
.builder-form-panel:has([name="audience"][value="career_changer"]:checked) .guide-variant,
.builder-form-panel:has(select[name="audience"] option[value="career_changer"]:checked) .guide-variant,
.builder-form-panel:has([name="audience"][value="first_job"]:checked) .guide-variant,
.builder-form-panel:has(select[name="audience"] option[value="first_job"]:checked) .guide-variant,
.builder-form-panel:has([name="audience"][value="returning_to_work"]:checked) .guide-variant,
.builder-form-panel:has(select[name="audience"] option[value="returning_to_work"]:checked) .guide-variant { display: none; }
.builder-form-panel:has([name="audience"][value="career_changer"]:checked) .guide-variant[data-audience="career_changer"],
.builder-form-panel:has(select[name="audience"] option[value="career_changer"]:checked) .guide-variant[data-audience="career_changer"],
.builder-form-panel:has([name="audience"][value="first_job"]:checked) .guide-variant[data-audience="first_job"],
.builder-form-panel:has(select[name="audience"] option[value="first_job"]:checked) .guide-variant[data-audience="first_job"],
.builder-form-panel:has([name="audience"][value="returning_to_work"]:checked) .guide-variant[data-audience="returning_to_work"],
.builder-form-panel:has(select[name="audience"] option[value="returning_to_work"]:checked) .guide-variant[data-audience="returning_to_work"] { display: block; }

@media (max-width: 767.98px) {
    .guide { padding-left: var(--sp-3); }
    .guide-details:not([open]) .guide-prompt {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .guide-summary { align-items: center; }
}

/* "Is any of these you?" (step 2) and the compact "Tips for" switch */
.audience-choice {
    margin: 0 0 var(--sp-8);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    background: var(--ar-surface-soft);
}
.audience-legend {
    float: none;
    width: auto;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ar-ink);
    margin: 0 0 var(--sp-3);
}
.audience-legend .optional-mark { display: block; font-size: .8125rem; font-weight: 500; color: var(--ar-body); margin-top: 2px; }
.audience-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.audience-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--ar-surface);
    border: 1.5px solid var(--ar-line);
    border-radius: var(--r-md);
    font-size: .875rem;
    color: var(--ar-ink);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.audience-option:hover { border-color: #D3CFC6; }
.audience-option:has(input:checked) { border-color: var(--ar-accent); background: var(--ar-accent-soft); }
.audience-option input { margin: 0; accent-color: var(--ar-accent); flex-shrink: 0; }
@media (max-width: 575.98px) { .audience-options { grid-template-columns: 1fr; } }

.audience-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--ar-body);
}
.audience-select {
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ar-ink);
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-full);
    padding: 5px 28px 5px 12px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A5568' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
}
.audience-select:focus { outline: none; border-color: var(--ar-accent); box-shadow: 0 0 0 3px rgba(47,107,240,.18); }

/* ------------------------------------------------------------
   Step 1 — template picker
   ------------------------------------------------------------ */
.template-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-4);
}
.template-search { flex: 1 1 260px; min-width: 200px; position: relative; }
.template-search .form-control { padding-left: 40px; }
.template-search .bi {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ar-muted);
    pointer-events: none;
}
.template-count { font-size: .8125rem; color: var(--ar-body); white-space: nowrap; }

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--sp-6);
}
.category-pill {
    background: transparent;
    border: 1px solid var(--ar-line);
    color: var(--ar-body);
    border-radius: var(--r-full);
    padding: 8px 16px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.category-pill:hover { background: rgba(255,255,255,.7); color: var(--ar-ink); }
.category-pill.active,
.category-pill.active:hover {
    background: var(--ar-ink);
    border-color: var(--ar-ink);
    color: #fff;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: var(--sp-5) var(--sp-4);
}
@media (max-width: 560px) {
    .template-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
}

.template-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
    border-radius: var(--r-lg);
    transition: transform .15s cubic-bezier(.4,0,.2,1);
}
.template-card:hover { transform: translateY(-2px); }
.template-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.template-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1.414;
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.template-card:hover .template-thumb { border-color: #D3CFC6; box-shadow: var(--sheet-shadow); }
.template-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Selected: a real accent ring, drawn outside the frame. */
.template-card.selected .template-thumb {
    border-color: var(--ar-accent);
    box-shadow: 0 0 0 3px var(--ar-accent-soft), 0 0 0 4px var(--ar-accent);
}

/* Live fallback render — the whole 794px A4 page, scaled by
   --thumb-scale (builder.js sets it per card width). */
.template-thumb-render {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--ar-surface);
    pointer-events: none;
}
.template-thumb-frame {
    width: 794px;
    height: 1123px;
    border: 0;
    background: var(--ar-surface);
    transform-origin: top left;
    transform: scale(var(--thumb-scale, 0.22));
    pointer-events: none;
    display: block;
}
.template-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: var(--ar-surface-soft);
    color: var(--ar-body);
    font-weight: 600;
    text-align: center;
    font-size: .8125rem;
}

.template-check {
    position: absolute;
    top: 10px; right: 10px;
    width: 24px; height: 24px;
    border-radius: var(--r-full);
    background: var(--ar-accent);
    color: #fff;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    box-shadow: 0 0 0 3px #fff;
}
.template-card.selected .template-check { display: inline-flex; }

.template-info {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 10px 2px 0;
}
.template-name {
    font-weight: 700;
    font-size: .875rem;
    color: var(--ar-ink);
    line-height: 1.3;
    letter-spacing: -.01em;
}
.template-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 4px 7px;
    border-radius: var(--r-full);
    color: var(--ar-body-strong);
    background: rgba(16,35,58,.05);
    white-space: nowrap;
}
.template-badge--ats { color: #146C43; background: var(--ar-success-soft); }

/* Plain-English note under the style filters; the inline badge inside it
   is the same chip the cards use, so the two visibly match. */
.filter-note {
    margin: calc(-1 * var(--sp-2)) 0 var(--sp-6);
    max-width: 62ch;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ar-body);
}
.filter-note .template-badge { margin: 0 2px; vertical-align: 1px; }

/* "This layout doesn't show a photo" — appears under a photo-free card the
   moment it is the chosen one, and only then. */
.template-photo-note {
    display: none;
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    font-size: .75rem;
    line-height: 1.45;
    color: var(--ar-body);
}
.template-card:has(input[type="radio"]:checked) .template-photo-note { display: block; }

.empty-grid {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    color: var(--ar-body);
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
}
.empty-grid .bi { display: block; font-size: 1.5rem; margin-bottom: var(--sp-2); color: var(--ar-muted); }

/* ------------------------------------------------------------
   Step 2 — photo + import
   ------------------------------------------------------------ */
.photo-block {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-8);
    flex-wrap: wrap;
}
.photo-preview {
    width: 92px; height: 92px;
    border-radius: var(--r-full);
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ar-muted);
    font-size: 2rem;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Layout can't show a photo: same block, quieter, no controls. */
.photo-block--unavailable { border-style: dashed; }
.photo-block--unavailable .photo-preview { opacity: .55; }
.photo-block--unavailable .photo-help a { color: var(--ar-accent-ink); font-weight: 600; }

.photo-actions {
    flex: 1 1 240px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.photo-actions > strong { font-size: .9375rem; color: var(--ar-ink); }
.photo-actions .photo-help { font-size: .8125rem; color: var(--ar-body); }
.photo-action-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 2px; }

.photo-dropzone {
    border: 1.5px dashed #CFCAC0;
    border-radius: var(--r-md);
    padding: var(--sp-4);
    text-align: center;
    color: var(--ar-body);
    cursor: pointer;
    background: var(--ar-surface);
    font-size: .875rem;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.photo-dropzone .bi { margin-right: 6px; }
.photo-dropzone:hover,
.photo-dropzone.is-dragover {
    border-color: var(--ar-accent);
    background: var(--ar-accent-soft);
    color: var(--ar-accent-ink);
}

.import-card {
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    background: var(--ar-surface-soft);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
}
.import-card strong { font-size: .9375rem; color: var(--ar-ink); display: inline-flex; align-items: center; gap: 7px; }
.import-card p { margin: 4px 0 0; font-size: .875rem; color: var(--ar-body); line-height: 1.55; }
.import-card .import-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.import-card .import-row .form-control { max-width: 300px; }

/* Crop modal */
.modal-content {
    border: 1px solid var(--ar-line);
    border-radius: var(--r-xl);
    box-shadow: var(--pop-shadow);
}
.modal-header, .modal-footer { border-color: var(--ar-line); }
.modal-title { font-weight: 700; letter-spacing: -.02em; }
.crop-modal-body { max-height: 60vh; overflow: hidden; background: var(--ar-surface-soft); }
.crop-img-wrapper { max-height: 50vh; }
.crop-img-wrapper img { max-width: 100%; display: block; }

/* ------------------------------------------------------------
   Repeaters
   ------------------------------------------------------------ */
.repeater-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.repeater-item {
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .15s ease;
}
.repeater-item:hover { border-color: #D3CFC6; }
.repeater-item.sortable-ghost { opacity: .4; background: var(--ar-accent-soft); }
.repeater-item.sortable-chosen { box-shadow: var(--pop-shadow); }

.repeater-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--ar-surface-soft);
    border-bottom: 1px solid var(--ar-line);
    user-select: none;
}
.repeater-item[data-open="false"] .repeater-header { border-bottom-color: transparent; }

.drag-handle {
    cursor: grab;
    color: var(--ar-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 2px;
    flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }

.repeater-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--ar-ink);
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The title doubles as the collapse toggle; as a <button> it needs the UA
   chrome stripped so it reads as a heading, not a control. */
button.repeater-title {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--ar-ink);
}
.repeater-collapse-icon { color: var(--ar-muted); transition: transform .15s ease; font-size: .8rem; }
.repeater-item[data-open="false"] .repeater-collapse-icon { transform: rotate(-90deg); }

.repeater-body { padding: var(--sp-5); }
.repeater-item[data-open="false"] .repeater-body { display: none; }
.repeater-body .field-row:last-child { margin-bottom: 0; }

.repeater-actions { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }

.repeater-add {
    margin-top: var(--sp-3);
    width: 100%;
    background: transparent;
    border: 1.5px dashed #CFCAC0;
    color: var(--ar-body-strong);
    padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.repeater-add:hover {
    border-color: var(--ar-accent);
    background: var(--ar-accent-soft);
    color: var(--ar-accent-ink);
}

.kbd-reorder { display: inline-flex; flex-direction: column; gap: 2px; }
.kbd-reorder button {
    width: 22px; height: 16px;
    border: 1px solid var(--ar-line);
    background: var(--ar-surface);
    border-radius: 4px;
    color: var(--ar-body);
    cursor: pointer;
    font-size: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.kbd-reorder button:hover { background: var(--ar-accent-soft); color: var(--ar-accent-ink); border-color: var(--ar-accent); }
.kbd-reorder button:disabled { opacity: .35; cursor: not-allowed; }

.compact-list .compact-item .repeater-header { padding: var(--sp-2) var(--sp-3); }
.compact-list .compact-item .repeater-body { padding: var(--sp-3); }

/* ------------------------------------------------------------
   Rich text
   ------------------------------------------------------------ */
.rich-text-wrap {
    border: 1.5px solid var(--ar-line);
    border-radius: var(--r-md);
    background: var(--ar-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
    overflow: hidden;
}
.rich-text-wrap:focus-within {
    border-color: var(--ar-accent);
    box-shadow: 0 0 0 3px rgba(47,107,240,.18);
}
.rich-toolbar {
    display: flex;
    gap: 2px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--ar-line);
    background: var(--ar-surface-soft);
}
.rich-btn {
    width: 30px; height: 30px;
    border: none;
    background: transparent;
    color: var(--ar-body);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.rich-btn:hover { background: #fff; color: var(--ar-ink); }
.rich-btn.active { background: var(--ar-accent-soft); color: var(--ar-accent-ink); }

.rich-editor {
    padding: var(--sp-3) var(--sp-4);
    min-height: 118px;
    outline: none;
    line-height: 1.6;
    font-size: .9375rem;
    color: var(--ar-ink);
}
.rich-editor[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: var(--ar-muted);
    pointer-events: none;
}
.rich-editor ul { padding-left: 1.35rem; margin: 0; }
.rich-editor li { margin-bottom: 3px; }

/* Hand-written writing help (AI is off) */
.writing-help {
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-md);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ar-ink);
}
.writing-help > *:last-child { margin-bottom: 0; }
.writing-help p { margin: 0 0 var(--sp-3); }
.writing-help .wh-label {
    display: block;
    font-weight: 700;
    color: var(--ar-body);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .6875rem;
    margin-bottom: 2px;
}
.writing-help .wh-before { color: var(--ar-danger); font-weight: 700; }
.writing-help .wh-after  { color: var(--ar-success); font-weight: 700; }

/* ------------------------------------------------------------
   Step 5 — skills
   ------------------------------------------------------------ */
.skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    min-height: 64px;
    padding: var(--sp-3);
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-6);
    align-items: flex-start;
}
.skill-chips:empty {
    align-items: center;
    justify-content: center;
    border-style: dashed;
}
.skill-chips:empty::before {
    content: "Your skills appear here as you add them.";
    color: var(--ar-body);
    font-size: .875rem;
}

.skill-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    color: var(--ar-ink);
    border-radius: var(--r-full);
    padding: 5px 8px 5px 6px;
    font-size: .875rem;
}
.skill-tag.sortable-ghost { opacity: .4; }
.skill-tag .drag-handle { color: var(--ar-muted); font-size: .85rem; padding: 0 1px; }
.skill-tag-name { font-weight: 600; }

.skill-tag-level {
    border: none;
    background: transparent;
    color: var(--ar-body);
    font-size: .75rem;
    cursor: pointer;
    padding: 2px 3px;
    border-radius: var(--r-sm);
    font-family: inherit;
}
.skill-tag-level:hover { background: var(--ar-accent-soft); color: var(--ar-accent-ink); }

.skill-dots { display: inline-flex; gap: 3px; align-items: center; }
.skill-dot {
    width: 7px; height: 7px;
    border-radius: var(--r-full);
    background: #D7D2C8;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease;
}
.skill-dot.filled { background: var(--ar-accent); }

.skill-remove {
    background: transparent;
    border: none;
    color: var(--ar-body);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    width: 20px; height: 20px;
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.skill-remove:hover { background: var(--ar-danger); color: #fff; }

.suggestion-label {
    font-size: .8125rem;
    color: var(--ar-body);
    margin: 0 0 var(--sp-2);
    font-weight: 600;
}
.skill-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-suggestion {
    background: transparent;
    border: 1px solid var(--ar-line);
    color: var(--ar-body);
    border-radius: var(--r-full);
    padding: 6px 12px;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.skill-suggestion:hover { background: var(--ar-accent-soft); border-color: var(--ar-accent); color: var(--ar-accent-ink); }

/* ------------------------------------------------------------
   Step 6 — extras
   ------------------------------------------------------------ */
.extras-block {
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}
.extras-block-header { margin-bottom: var(--sp-4); }

/* The summary is the headline of step 6, not the first of eight equal
   blocks: larger heading, accent rule, and its guidance sits above the
   box (with examples open) so it is read before anyone starts typing. */
.summary-block {
    border-left: 3px solid var(--ar-accent);
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    margin-bottom: var(--sp-6);
}
.summary-block-title {
    font-size: 1.375rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ar-ink);
    margin: 0 0 6px;
}
.summary-block-sub {
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ar-body);
    max-width: 60ch;
    margin: 0;
}
.summary-block .guide { margin-bottom: var(--sp-4); }
.summary-block textarea.form-control { min-height: 140px; font-size: 1rem; }
.extras-optional { margin: var(--sp-6) 0 var(--sp-2); }
.extras-block-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ar-ink);
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.extras-block-sub { font-size: .875rem; color: var(--ar-body); margin: 0; line-height: 1.55; }

.section-order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.section-order-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-md);
    cursor: grab;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.section-order-item:hover { background: var(--ar-accent-soft); border-color: var(--ar-accent); }
.section-order-item.sortable-ghost { opacity: .35; }
.section-order-item.sortable-chosen { cursor: grabbing; }
.section-order-label { font-weight: 600; color: var(--ar-ink); flex-grow: 1; font-size: .875rem; }

.hobby-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 2rem; }
.hobby-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--ar-surface-soft);
    color: var(--ar-ink);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-full);
    font-size: .8125rem;
    font-weight: 600;
}
.hobby-chip-remove {
    background: none;
    border: 0;
    color: var(--ar-body);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 1px;
}
.hobby-chip-remove:hover { color: var(--ar-danger); }

/* ------------------------------------------------------------
   Live preview panel
   ------------------------------------------------------------ */
.preview-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 2px;
}
.completeness-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}
.completeness-bar-track {
    flex: 1 1 auto;
    height: 4px;
    max-width: 180px;
    background: var(--ar-line);
    border-radius: var(--r-full);
    overflow: hidden;
}
.completeness-bar-fill {
    height: 100%;
    width: 0;
    background: var(--ar-accent);
    border-radius: var(--r-full);
    transition: width .3s cubic-bezier(.4,0,.2,1), background-color .3s ease;
}
.completeness-bar-fill[data-tier="low"]  { background: var(--ar-muted); }
.completeness-bar-fill[data-tier="mid"]  { background: var(--ar-accent); }
.completeness-bar-fill[data-tier="high"] { background: var(--ar-success); }

.completeness-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ar-body);
    white-space: nowrap;
}

/* builder.js writes "Updates as you type" into this label while idle.
   The preview is visibly live already, so we only surface the status
   once it has something real to say (Saving… / Saved 7:01 pm). */
.saving-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--ar-body);
    margin-left: auto;
}
.saving-indicator .save-dot {
    width: 6px; height: 6px;
    border-radius: var(--r-full);
    background: transparent;
}
.saving-indicator .save-dot.saving { background: #B45309; }
.saving-indicator .save-dot.saved  { background: var(--ar-success); }
.saving-indicator .save-label { display: none; }
.saving-indicator:has(.save-dot.saving) .save-label,
.saving-indicator:has(.save-dot.saved) .save-label { display: inline; }

.preview-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 2px 0 var(--sp-2);
    scrollbar-width: thin;
}

/* The scaled A4 sheet needs a layout box of its scaled size — the
   transform alone would leave the full 794×1123 footprint behind. */
.preview-stage-inner {
    position: relative;
    width: calc(794px * var(--preview-scale));
    height: calc(1123px * var(--preview-scale));
    margin: 0 auto;
}

#cv-preview-container,
.cv-preview-container {
    position: absolute;
    top: 0; left: 0;
    width: 794px;
    min-height: 1123px;
    background: var(--ar-surface);
    border-radius: 2px;
    box-shadow: var(--sheet-shadow);
    overflow: hidden;
    transform: scale(var(--preview-scale));
    transform-origin: top left;
    transition: opacity .2s ease;
}

/* Ghosted sample page: the empty preview should look like a document
   waiting for words, not a broken image. */
.preview-skeleton {
    width: 100%;
    min-height: 1123px;
    padding: 96px 84px;
    background:
        linear-gradient(var(--ar-line-soft), var(--ar-line-soft)) 0 0 / 46% 34px no-repeat,
        linear-gradient(var(--ar-line-soft), var(--ar-line-soft)) 0 58px / 28% 14px no-repeat;
    background-origin: content-box;
    position: relative;
}
.preview-skeleton::after {
    content: '';
    position: absolute;
    left: 84px; right: 84px; top: 200px;
    height: 520px;
    background: repeating-linear-gradient(
        to bottom,
        var(--ar-line-soft) 0 10px,
        transparent 10px 34px
    );
    opacity: .85;
}

.preview-tip {
    display: block;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ar-body);
    padding: 0 2px;
}

/* ------------------------------------------------------------
   Mobile preview FAB + sheet
   ------------------------------------------------------------ */
/* Not a floating pill over the content any more: it sits inside the fixed
   Back / Next bar's row, at the right edge, so it can never cover a field
   or a tap target (QA M6 measured it over the photo dropzone at 390px). The
   bar reserves the slot with margin-right on its Next button. */
.preview-fab {
    display: none;
    position: fixed;
    right: var(--sp-4);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    z-index: 96;
    width: 108px;
    min-height: 48px;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: var(--ar-ink);
    color: #fff;
    border: 1.5px solid var(--ar-ink);
    border-radius: var(--r-md);
    font-family: inherit;
    font-weight: 700;
    font-size: .875rem;
    cursor: pointer;
}
.preview-fab:hover { filter: brightness(1.22); }
@media (max-width: 1023.98px) { .preview-fab { display: inline-flex; } }

.mobile-preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(16,35,58,.45);
    z-index: 1050;
    display: none;
    align-items: stretch;
    justify-content: flex-end;
    --preview-scale: .48;
}
.mobile-preview-modal.is-open { display: flex; }
.mobile-preview-modal__panel {
    width: 100%;
    max-width: 460px;
    background: var(--ar-bg);
    height: 100%;
    overflow: auto;
    padding: var(--sp-5) var(--sp-4);
    position: relative;
    animation: ar-slide-in .22s cubic-bezier(0,0,.2,1);
}
.mobile-preview-modal__close {
    position: absolute;
    top: var(--sp-3); right: var(--sp-3);
    width: 40px; height: 40px;
    border-radius: var(--r-full);
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    color: var(--ar-ink);
    cursor: pointer;
    z-index: 2;
}
.mobile-preview-modal h3 {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 2px 0 var(--sp-4);
    color: var(--ar-ink);
}
@media (max-width: 400px) { .mobile-preview-modal { --preview-scale: .38; } }

/* ------------------------------------------------------------
   Toasts
   ------------------------------------------------------------ */
.toast-applyraft-stack {
    position: fixed;
    top: calc(var(--ar-topbar) + 12px);
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
}
.toast-applyraft {
    pointer-events: auto;
    background: var(--ar-ink);
    color: #fff;
    border-radius: var(--r-md);
    padding: 12px 16px;
    box-shadow: var(--pop-shadow);
    max-width: 360px;
    min-width: 220px;
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    animation: ar-slide-in .22s cubic-bezier(0,0,.2,1);
    border-left: 3px solid var(--ar-accent);
}
.toast-applyraft.success { border-left-color: var(--ar-success); }
.toast-applyraft.error   { border-left-color: #F97066; }
.toast-applyraft .toast-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
}
.toast-applyraft .toast-close:hover { color: #fff; }

/* ------------------------------------------------------------
   Step 7 — finalize
   ------------------------------------------------------------ */
.finalize-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--sp-8);
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-8) var(--sp-16);
}
@media (max-width: 1199.98px) {
    .finalize-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); }
}
@media (max-width: 991.98px) {
    .finalize-grid { grid-template-columns: 1fr; padding: var(--sp-4) var(--sp-4) var(--sp-12); }
}

.finalize-preview-panel { min-width: 0; }

.customize-lead {
    margin: 0 0 var(--sp-3);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ar-body);
}
.customize-lead strong { color: var(--ar-ink); }

/* Customize strip — the design controls sit with the document they
   change, above the sheet, not buried in the action column. */
.customize-strip {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
}
.customize-group { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.customize-label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ar-body);
    white-space: nowrap;
}
.customize-divider {
    width: 1px;
    align-self: stretch;
    background: var(--ar-line);
}

.color-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.color-swatch {
    width: 22px; height: 22px;
    border: 1px solid rgba(16,35,58,.12);
    border-radius: var(--r-full);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ar-ink);
}
/* The template's own accent leads the row, named, and set apart from the
   stock swatches by a hairline. */
.color-swatches { align-items: center; }
.swatch-default-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ar-body);
    padding-right: 10px;
    margin-right: 4px;
    border-right: 1px solid var(--ar-line);
    line-height: 22px;
}
.color-custom { display: inline-flex; align-items: center; gap: 6px; }
.color-custom input[type="color"] {
    width: 30px; height: 30px;
    padding: 0;
    border: 1px solid var(--ar-line);
    border-radius: var(--r-sm);
    cursor: pointer;
    background: #fff;
}
.color-custom input[type="text"] {
    width: 92px;
    min-height: 34px;
    padding: 4px 8px;
    text-transform: uppercase;
    font-family: var(--ar-mono);
    font-size: .75rem;
    letter-spacing: .02em;
}

.font-options { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.font-option {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--ar-line);
    border-radius: var(--r-full);
    cursor: pointer;
    font-size: .8125rem;
    color: var(--ar-body);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.font-option:hover { background: var(--ar-surface-soft); color: var(--ar-ink); }
.font-option.active {
    background: var(--ar-accent-soft);
    border-color: var(--ar-accent);
    color: var(--ar-accent-ink);
    font-weight: 700;
}

/* The A4 sheet. Height is unbounded here (a CV can run to two pages),
   so this one uses `zoom` rather than `transform` — zoom shrinks the
   layout box too, so the stage never leaves a tall empty gap below a
   scaled page. `overflow:auto` is the graceful fallback anywhere zoom
   is unsupported. */
.finalize-preview-stage {
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    overflow: auto;
    max-height: calc(100vh - 190px);
}
#cv-preview-finalize {
    width: 794px;
    margin: 0 auto;
    background: var(--ar-surface);
    box-shadow: var(--sheet-shadow);
    zoom: var(--fin-scale);
}

/* Action column */
.finalize-actions-panel {
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    position: sticky;
    top: calc(var(--ar-topbar) + var(--sp-6));
    align-self: start;
    max-height: calc(100vh - var(--ar-topbar) - var(--sp-12));
    overflow-y: auto;
}
@media (max-width: 991.98px) {
    .finalize-actions-panel { position: static; max-height: none; }
}

.finalize-section { margin-bottom: var(--sp-6); }
.finalize-section:last-child { margin-bottom: 0; }
.finalize-section + .finalize-section {
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ar-line);
}
.finalize-section-title {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--ar-body);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 var(--sp-3);
}
.finalize-note { font-size: .8125rem; color: var(--ar-body); line-height: 1.55; margin: 0 0 var(--sp-3); }
.finalize-note:last-child { margin-bottom: 0; }

/* One unmissable primary act. */
.download-primary {
    width: 100%;
    min-height: 56px;
    font-size: 1rem;
    border-radius: var(--r-md);
}
.download-secondary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    font-size: .8125rem;
    color: var(--ar-body);
    flex-wrap: wrap;
}
.download-secondary .sep { color: var(--ar-line); }

.finalize-action-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.finalize-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px var(--sp-4);
    border: 1.5px solid var(--ar-line);
    border-radius: var(--r-md);
    background: var(--ar-surface);
    color: var(--ar-ink);
    font-family: inherit;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}
.finalize-btn:hover { background: var(--ar-surface-soft); border-color: #D3CFC6; color: var(--ar-ink); }
.finalize-btn.primary {
    background: var(--ar-ink);
    border-color: var(--ar-ink);
    color: #fff;
    font-weight: 700;
}
.finalize-btn.primary:hover { filter: brightness(1.22); color: #fff; }
.finalize-btn:disabled { opacity: .5; cursor: not-allowed; }
.finalize-btn .bi { font-size: 1rem; }

/* Keep-this-CV card (guests) / save card (signed in) */
.keepsafe-card {
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
}
.keepsafe-card h3 {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    color: var(--ar-ink);
}
.keepsafe-card p { font-size: .8125rem; color: var(--ar-body); line-height: 1.55; margin: 0 0 var(--sp-3); }
.keepsafe-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Share */
.share-link-box {
    display: flex;
    align-items: stretch;
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.share-link-box input {
    flex: 1 1 auto;
    border: 0;
    padding: 9px 10px;
    font-size: .75rem;
    font-family: var(--ar-mono);
    background: transparent;
    color: var(--ar-body);
    min-width: 0;
}
.share-link-box input:focus { outline: 0; color: var(--ar-ink); }
.share-link-box button {
    border: 0;
    border-left: 1px solid var(--ar-line);
    background: var(--ar-surface-soft);
    color: var(--ar-ink);
    padding: 0 12px;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.share-link-box button:hover { background: var(--ar-accent-soft); color: var(--ar-accent-ink); }

.expiry-select {
    width: 100%;
    margin-top: var(--sp-2);
    padding: 8px 10px;
    border: 1px solid var(--ar-line);
    border-radius: var(--r-md);
    font-size: .8125rem;
    font-family: inherit;
    color: var(--ar-ink);
    background: var(--ar-surface);
}
.expiry-select:focus { outline: none; border-color: var(--ar-accent); box-shadow: 0 0 0 3px rgba(47,107,240,.18); }

.qr-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--ar-surface-soft);
    border: 1px solid var(--ar-line);
    border-radius: var(--r-md);
}
.qr-wrap svg, .qr-wrap img { width: 84px; height: 84px; background: #fff; border-radius: 4px; }
.qr-meta { font-size: .75rem; color: var(--ar-body); line-height: 1.5; }
.qr-meta strong { color: var(--ar-ink); display: block; font-size: .8125rem; }

.cv-title-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1.5px solid var(--ar-line);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ar-ink);
    background: var(--ar-surface);
}
.cv-title-input:focus { outline: 0; border-color: var(--ar-accent); box-shadow: 0 0 0 3px rgba(47,107,240,.18); }

/* Post-download success — the peak-end moment. No emoji, no alert box. */
.success-state {
    border: 1px solid var(--ar-line);
    border-left: 3px solid var(--ar-success);
    border-radius: var(--r-lg);
    background: var(--ar-surface);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.success-state h2 {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ar-ink);
    margin: 0 0 6px;
    line-height: 1.3;
}
.success-state .success-file {
    font-family: var(--ar-mono);
    font-size: .8125rem;
    color: var(--ar-body);
    word-break: break-all;
}
.success-steps-title {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ar-body);
    margin: var(--sp-5) 0 var(--sp-2);
}
.success-steps {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.success-steps li {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ar-body);
    padding-left: 2px;
}
.success-steps li::marker { color: var(--ar-muted); font-weight: 700; }
.success-steps strong { color: var(--ar-ink); font-weight: 700; }
.success-next {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.success-next li { margin: 0; }
.success-next .finalize-btn { justify-content: flex-start; border: 0; padding: 8px 0; background: none; }
.success-next .finalize-btn:hover { background: none; color: var(--ar-accent-ink); text-decoration: underline; }
.success-next .finalize-btn .bi { color: var(--ar-muted); }

/* ------------------------------------------------------------
   Cover letter
   ------------------------------------------------------------ */
.cl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: var(--sp-8);
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-8) var(--sp-16);
}
@media (max-width: 1023.98px) {
    /* Clearance for the fixed Back / Save / Download bar. */
    .cl-grid { grid-template-columns: 1fr; padding: var(--sp-4) var(--sp-4) 132px; }
}
.cl-preview-col {
    position: sticky;
    top: calc(var(--ar-topbar) + var(--sp-6));
    max-height: calc(100vh - var(--ar-topbar) - var(--sp-12));
    overflow: auto;
    min-width: 0;
}
@media (max-width: 1023.98px) {
    .cl-preview-col { position: static; max-height: none; overflow: visible; }
}
.cl-paper {
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: 2px;
    box-shadow: var(--sheet-shadow);
    padding: 48px 44px;
    font-size: 11pt;
    line-height: 1.6;
    color: #1F2937;
    min-height: 560px;
}
.cl-paper .meta { color: #6B7280; font-size: .85rem; }
/* Contact line: separate only the parts that actually have content, so an
   empty phone field never leaves a stranded bullet. */
.cl-paper .header .meta span:not(:empty) ~ span:not(:empty)::before {
    content: " · ";
    color: #9CA3AF;
}
.cl-paper h2.name { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .2rem; }
.cl-paper .recipient { margin-top: 1.4rem; }
.cl-paper .body { white-space: pre-wrap; margin-top: 1.4rem; }
.cl-paper hr { border: 0; border-top: 2px solid; opacity: .9; margin: .9rem 0 1.1rem; }

/* ------------------------------------------------------------
   Motion
   ------------------------------------------------------------ */
@keyframes ar-slide-in {
    from { transform: translateX(12px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .template-card:hover,
    .color-swatch:hover { transform: none; }
}

/* ------------------------------------------------------------
   Print — step 7 prints the CV alone, at full size.
   ------------------------------------------------------------ */
@media print {
    .builder-topbar,
    .builder-alerts,
    .step-nav,
    .finalize-actions-panel,
    .customize-strip,
    .progress-rail,
    .preview-fab,
    #mobile-preview-modal,
    .toast-applyraft-stack { display: none !important; }

    .finalize-grid { display: block !important; padding: 0 !important; max-width: none !important; }
    .finalize-preview-panel { border: 0 !important; padding: 0 !important; }
    .finalize-preview-stage {
        border: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #cv-preview-finalize {
        zoom: 1 !important;
        transform: none !important;
        width: 794px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    .builder-body { background: #fff !important; }
}