/* ===============================================================
   HUVIENA TOOLS — Resume tools
   ===============================================================
   Loaded only on the four resume pages (declared per tool in
   config/tools.php), so nothing here costs the image or PDF tools
   anything.

   Two halves, and the split matters:

     A. The wizard chrome (sections 1–8) — stepper, panels, form
        controls, preview stage. Uses the site's theme tokens, so it
        follows light/dark like the rest of the site.

     B. The resume document (sections 9–12) — the A4 sheet and the four
        templates. Uses literal colours, never theme tokens, because a
        resume is a printed artefact and must look identical whatever
        theme the visitor has chosen. A dark website must not produce a
        dark resume.

   Sections 13 onwards are shared with the other resume tools.

   NOTE ON tool.css: it is loaded on these pages too, and it styles
   inputs by `type` attribute (input[type="text"], select …). Anything
   this file does not style explicitly will fall back to those rules or
   to raw browser rendering. The wizard's controls are therefore styled
   by CLASS and scoped to .rsm-wizard, so every field looks the same
   whatever its type, and nothing leaks into the image tools.
   =============================================================== */

/* ===============================================================
   1. Wizard shell
   ===============================================================
   The six-step flow: Import → Verify → Build → Template → Preview →
   Download. Everything in this section is site chrome, so it uses the
   theme tokens and follows light/dark. The resume itself does not.
   =============================================================== */

/* The shared palette calls this --bg-muted; the resume components use
   the more descriptive name. Declared here, and only loaded on resume
   pages, so nothing else is affected. */
:root { --surface-muted: var(--bg-muted); }

.rsm-wizard { display: block; }

/* --- measure ---------------------------------------------------
   A form reads badly across 1086px, but the preview step needs room
   for an A4 sheet beside its controls. So the page card narrows for
   the form steps and opens up for the preview. The card itself is
   sized rather than the inner content, otherwise the whitespace would
   collect inside the card and look like a mistake.

   Uses :has() so it needs no JS. If a browser does not support it the
   card simply stays full width — no layout breaks, just more air. */

.tool-shell:has(.rsm-wizard) {
    max-width: 1000px;
    margin-inline: auto;
}

.tool-shell:has(.rsm-wizard[data-step="5"]) { max-width: none; }

.rsm-wizard__head { margin-bottom: 22px; }

/* --- stepper ---------------------------------------------------
   A progress rail rather than six floating pills: the steps sit on a
   line, the line fills as you advance, and each marker states its own
   status (done / current / skipped / locked). */

.rsm-stepper {
    --rsm-rail: 84%;

    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* The unfilled track, then the filled portion on top of it. Both sit
   behind the markers, centred on their 32px circles. */
.rsm-stepper::before,
.rsm-stepper::after {
    position: absolute;
    top: 15px;
    left: calc((100% - var(--rsm-rail)) / 2);
    height: 2px;
    border-radius: 2px;
    content: "";
}

.rsm-stepper::before {
    width: var(--rsm-rail);
    background: var(--border);
}

.rsm-stepper::after {
    width: calc(var(--rsm-rail) * var(--rsm-progress, 0));
    background: var(--accent);
    transition: width .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .rsm-stepper::after { transition: none; }
}

.rsm-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 0 2px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--ink-4);
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s;
}

.rsm-step:disabled { cursor: default; }
.rsm-step:not(:disabled):hover { color: var(--text); }
.rsm-step:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rsm-step__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    color: var(--ink-4);
    background: var(--surface);
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, color .15s, background .15s;
}

.rsm-step__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visited. Blue rather than green: green is reserved for success
   states elsewhere on the site, and five green ticks would shout. */
.rsm-step.is-done { color: var(--text-secondary); }

.rsm-step.is-done .rsm-step__marker {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);
}

.rsm-step.is-current { color: var(--text); font-weight: 700; }

.rsm-step.is-current .rsm-step__marker {
    border-color: var(--accent);
    color: var(--on-brand);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* A step that genuinely did not apply — "Verify" for someone who started
   from scratch. Shown as passed over rather than completed. */
.rsm-step.is-skipped { color: var(--ink-4); }

.rsm-step.is-skipped .rsm-step__marker {
    border-style: dashed;
    color: var(--ink-4);
    background: var(--surface);
}

.rsm-step.is-locked { color: var(--ink-4); opacity: .7; }

.rsm-step-mobile {
    display: none;
    position: relative;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--border);
    color: var(--text);
    font-size: .84rem;
    font-weight: 700;
}

/* The mobile line doubles as a progress bar. */
.rsm-step-mobile::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: calc(100% * var(--rsm-progress, 0));
    height: 2px;
    background: var(--accent);
    content: "";
    transition: width .25s ease-out;
}

/* --- panels ---------------------------------------------------- */

.rsm-step-panel { margin-top: 18px; animation: rsm-fade .18s ease-out; }

@keyframes rsm-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rsm-step-panel { animation: none; }
}

.rsm-step-panel__title {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.rsm-step-panel__lede {
    max-width: 70ch;
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.6;
}

/* --- alert ----------------------------------------------------- */

.rsm-alert {
    position: relative;
    margin: 14px 0;
    padding: 11px 40px 11px 13px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--bg-soft);
    font-size: .82rem;
    line-height: 1.55;
}

.rsm-alert[hidden] { display: none !important; }
.rsm-alert p { margin: 0; }
.rsm-alert--ok { border-left-color: var(--ok); background: var(--ok-bg); }
.rsm-alert--warn { border-left-color: var(--warn); background: var(--warn-bg); }
.rsm-alert--error { border-left-color: var(--err); background: var(--err-bg); }
.rsm-alert--info { border-left-color: var(--accent); background: var(--accent-soft); }

.rsm-alert__close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    color: var(--text-secondary);
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.rsm-alert__close:hover { color: var(--text); background: var(--bg-muted); }

/* One optional action, e.g. undo after AI replaced the visitor's wording. */
.rsm-alert__action {
    margin-top: 8px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rsm-alert__action:hover { opacity: .8; }
.rsm-alert__action:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* ===============================================================
   2. Step 1 — Import
   =============================================================== */

/* -----------------------------------------------------------------
   Step 1 — import is the action, not one of two options
   -----------------------------------------------------------------
   This replaced a two-card grid that gave "Start From Scratch" exactly
   the same weight as the thing almost everybody came here to do. The
   drop zone now fills the panel, and starting from scratch is a single
   quiet line underneath instead of a competing card.
   ----------------------------------------------------------------- */
.rsm-import-hero {
    margin-top: 18px;
    padding: 26px 22px 18px;

    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(160deg, var(--brand-soft) 0%, transparent 70%),
        var(--surface);
    text-align: center;
}

/* The zone inside the hero is the big target, so it reads as a drop
   surface rather than a small button with a label above it. */
.rsm-wizard .rsm-import-hero .rsm-drop {
    gap: 14px;
    padding: 34px 20px;
    border-width: 2px;
    background: transparent;
}

.rsm-wizard .rsm-import-hero .rsm-drop__icon { color: var(--brand-strong); }
.rsm-wizard .rsm-import-hero .rsm-drop__icon .icon { width: 30px; height: 30px; }
.rsm-wizard .rsm-import-hero .rsm-drop__title { font-size: 1.05rem; }
.rsm-wizard .rsm-import-hero .rsm-drop .btn { min-width: 170px; }

.rsm-wizard .rsm-import-hero .rsm-filename { margin-top: 14px; }

/* The rarer path, kept available without competing for attention. */
.rsm-scratch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin: 18px 0 0;
    color: var(--ink-4);
    font-size: .84rem;
}

/* Scoped to .rsm-wizard on purpose: the ATS checker defines its own
   .rsm-drop further down this same file for its different layout, and an
   unscoped rule here lost to it — the drop zone rendered as a flat grey
   panel instead of the bordered target it is meant to be. */
.rsm-wizard .rsm-drop {
    display: grid;
    gap: 10px;
    place-items: center;
    margin-top: 2px;
    padding: 20px 16px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-secondary);
    background: var(--surface);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.rsm-wizard .rsm-drop:hover,
.rsm-wizard .rsm-drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); }

.rsm-wizard .rsm-drop__title { color: var(--text); font-size: .88rem; font-weight: 650; }
.rsm-wizard .rsm-drop__formats { color: var(--ink-4); font-size: .72rem; letter-spacing: .02em; }

/* -----------------------------------------------------------------
   File input inside a clickable label
   -----------------------------------------------------------------
   There is deliberately no click() call anywhere for this input: the
   label activates it natively. Adding one made the picker open two or
   three times for a single click — see the note in resume/wizard.js.

   The .rsm-file-input rules themselves live in main.css, because the
   homepage and category pages use the same pattern without loading
   this stylesheet.
   ----------------------------------------------------------------- */
.rsm-drop { position: relative; }

/* The input is invisible, so the focus ring is drawn on the zone itself. */
.rsm-drop:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.rsm-filename { margin: 0; color: var(--text-secondary); font-size: .76rem; word-break: break-all; }

/* --- reading progress ------------------------------------------
   Shown while a file is read, which is the one step whose length we
   cannot know: a 12 MB PDF takes far longer than a 20 KB text file. The
   bar therefore fills per completed stage and pulses during the reading
   itself, rather than inventing a percentage that would sit still and
   then jump. */

.rsm-reading {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.rsm-reading[hidden] { display: none !important; }

.rsm-reading__top { display: flex; gap: 10px; align-items: center; }

.rsm-reading__spinner {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: rsm-spin .7s linear infinite;
}

@keyframes rsm-spin { to { transform: rotate(360deg); } }

.rsm-reading__stage { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: .88rem; font-weight: 650; }
.rsm-reading__meta { flex: none; color: var(--ink-4); font-size: .74rem; font-variant-numeric: tabular-nums; }

.rsm-reading__track {
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-muted);
}

.rsm-reading__bar {
    display: block;
    width: 8%;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width .3s ease-out;
}

/* Working: the step length is unknown, so the bar breathes instead of
   pretending to know how far along it is. */
.rsm-reading.is-working .rsm-reading__bar { animation: rsm-breathe 1.5s ease-in-out infinite; }

@keyframes rsm-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
    .rsm-reading__spinner { animation: none; }
    .rsm-reading.is-working .rsm-reading__bar { animation: none; }
}

/* Refuse a second file mid-read. */
.rsm-wizard .rsm-drop.is-busy {
    opacity: .55;
    pointer-events: none;
}

/* -----------------------------------------------------------------
   AI wait panel
   -----------------------------------------------------------------
   Pinned to the viewport rather than placed in the flow. The AI buttons
   are scattered down the form, while the message slot sits at the top of
   the wizard, so an in-flow notice is off-screen for exactly the people
   who need it. A request to a local model runs to tens of seconds, which
   makes "is this thing alive?" the question the panel has to answer.
   ----------------------------------------------------------------- */
.rsm-ai-wait {
    position: fixed;
    z-index: 60;
    left: 50%;
    /* Clears the pinned wizard nav, whose height is measured and published
       as --rsm-nav-h. Overlapping it would hide the Continue button, which
       is the one thing on screen the visitor actually needs. */
    bottom: calc(var(--rsm-nav-h, 0px) + 16px);
    transform: translateX(-50%);

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 12px;

    width: min(30rem, calc(100vw - 32px));
    padding: 14px 16px 12px;

    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, .18));

    animation: rsm-ai-in .18s ease-out;
}

.rsm-ai-wait[hidden] { display: none !important; }

@keyframes rsm-ai-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.rsm-ai-wait__spinner {
    grid-row: 1;
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: rsm-spin .7s linear infinite;
}

.rsm-ai-wait__body {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rsm-ai-wait__stage {
    color: var(--text);
    font-size: .86rem;
    font-weight: 650;
}

.rsm-ai-wait__note {
    color: var(--text-secondary);
    font-size: .75rem;
    line-height: 1.35;
}

/* The ticking clock is the whole point: a still panel for thirty seconds
   is indistinguishable from a frozen one. */
.rsm-ai-wait__elapsed {
    grid-row: 1;
    color: var(--ink-4);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.rsm-ai-wait__track {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-muted);
}

.rsm-ai-wait__bar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    /* The length of the wait is unknown, so the bar breathes rather than
       claiming to know how far along it is. */
    animation: rsm-breathe 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .rsm-ai-wait { animation: none; }
    .rsm-ai-wait__spinner,
    .rsm-ai-wait__bar { animation: none; }
}

.rsm-paste {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.rsm-paste__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    padding: 13px 16px;
    color: var(--text);
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.rsm-paste__summary::-webkit-details-marker { display: none; }
.rsm-paste__hint { color: var(--ink-4); font-size: .74rem; font-weight: 500; }
.rsm-paste__body { padding: 0 16px 16px; }

.rsm-privacy-inline {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 18px 0 0;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--bg-soft);
    font-size: .78rem;
    line-height: 1.55;
}

.rsm-privacy-inline svg { flex: none; margin-top: 1px; }

/* --- restore banner -------------------------------------------
   A quiet offer sitting above the stepper's first panel, not an alert.
   It only appears when a saved resume is actually found. */

.rsm-restore {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 22px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}

.rsm-restore[hidden] { display: none !important; }
.rsm-restore__title { margin: 0 0 2px; color: var(--text); font-size: .84rem; font-weight: 650; }
.rsm-restore__text { margin: 0; color: var(--ink-4); font-size: .76rem; line-height: 1.5; }
.rsm-restore__actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* ===============================================================
   3. Step 2 — Verify
   =============================================================== */

.rsm-verify__intro { margin-bottom: 16px; }
.rsm-verify__intro h2 { margin: 0 0 6px; color: var(--text); font-size: 1.12rem; font-weight: 700; }
.rsm-verify__intro p { max-width: 72ch; margin: 0; color: var(--text-secondary); font-size: .84rem; line-height: 1.6; }

.rsm-verify__block {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.rsm-verify__block h3 {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin: 0 0 14px;
    color: var(--text);
    font-size: .92rem;
    font-weight: 700;
}

.rsm-verify__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.rsm-verify__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.rsm-verify__label {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--ink-2);
    font-size: .76rem;
    font-weight: 650;
}

.rsm-verify__hint { margin: 0; color: var(--warn); font-size: .72rem; line-height: 1.45; }

.rsm-badge {
    padding: 1px 7px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rsm-badge--ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); background: var(--ok-bg); }
.rsm-badge--warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); background: var(--warn-bg); }
.rsm-badge--empty { color: var(--ink-4); background: var(--bg-muted); }

.rsm-verify__sections { margin: 0; padding: 0; list-style: none; }

.rsm-verify__section {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.rsm-verify__section:last-child { border-bottom: 0; }
.rsm-verify__section-mark { width: 18px; color: var(--ink-4); text-align: center; }
.rsm-verify__section[data-state="ok"] .rsm-verify__section-mark { color: var(--ok); }
.rsm-verify__section[data-state="warn"] .rsm-verify__section-mark { color: var(--warn); }
.rsm-verify__section-name { flex: 1 1 160px; color: var(--text); font-size: .82rem; font-weight: 600; }
.rsm-verify__section-meta { color: var(--text-secondary); font-size: .76rem; }

.rsm-warning-box {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    border-radius: var(--radius);
    background: var(--warn-bg);
}

.rsm-warning-box[hidden] { display: none !important; }
.rsm-warning-box__title { margin: 0 0 7px; color: var(--warn); font-size: .84rem; font-weight: 700; }
.rsm-warning-box__list { margin: 0; padding-left: 18px; color: var(--text); font-size: .79rem; line-height: 1.6; }

.rsm-raw { margin-bottom: 18px; }

.rsm-link-button {
    padding: 0;
    border: 0;
    color: var(--accent);
    background: transparent;
    font: inherit;
    font-size: .79rem;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rsm-link-button:hover { color: var(--accent-hover); }

.rsm-raw__text {
    max-height: 340px;
    margin: 10px 0 0;
    padding: 12px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--bg-soft);
    font: .74rem/1.55 var(--mono);
    white-space: pre-wrap;
    word-break: break-word;
}

.rsm-verify__actions { margin-top: 4px; }

/* ===============================================================
   4. Step 3 — Build
   =============================================================== */

.rsm-build {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.rsm-build__heading {
    margin: 0 0 10px;
    color: var(--text);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rsm-build__heading + .control__help { margin-top: -6px; }

.rsm-optional-list { display: grid; gap: 7px; margin: 12px 0 22px; padding: 0; list-style: none; }

.rsm-optional {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 13px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}

.rsm-optional.is-added { border-style: solid; background: var(--surface); }
.rsm-optional__name { flex: 1 1 140px; color: var(--text); font-size: .82rem; font-weight: 600; }
.rsm-optional__meta { color: var(--ink-4); font-size: .74rem; }

.rsm-completeness {
    position: sticky;
    top: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.rsm-completeness__title { margin: 0 0 12px; color: var(--text); font-size: .86rem; font-weight: 700; }

.rsm-completeness__value {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.rsm-completeness__note { margin: 10px 0 16px; color: var(--text-secondary); font-size: .74rem; line-height: 1.55; }

.rsm-completeness__subtitle {
    margin: 0 0 7px;
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rsm-completeness__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rsm-completeness__item { display: grid; gap: 2px; padding-left: 11px; border-left: 2px solid var(--border-strong); }
.rsm-completeness__item strong { color: var(--text); font-size: .79rem; font-weight: 650; }
.rsm-completeness__item span { color: var(--text-secondary); font-size: .74rem; line-height: 1.5; }
.rsm-completeness__done { color: var(--ok); font-size: .78rem; line-height: 1.5; }

.rsm-meter {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-muted);
}

.rsm-meter__bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width .25s ease-out;
}

/* ===============================================================
   5. Step 4 — Templates
   =============================================================== */

/* Two columns, not auto-fit: there are four templates, and at three
   columns the fourth was orphaned on its own row. 2x2 is balanced and
   gives each preview noticeably more room. */
.rsm-tpl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.rsm-tpl-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    background: var(--surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.rsm-tpl-card:hover { border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.rsm-tpl-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rsm-tpl-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rsm-tpl-card__frame {
    height: 300px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}

/* The scale itself is set per card by fitTemplatePreviews(), which
   measures the sheet. This is only the pre-measurement fallback. */
.rsm-tpl-card__frame .rsm-pages { transform: scale(.35); transform-origin: top left; }

.rsm-tpl-card__body { padding: 14px 15px 0; }
.rsm-tpl-card__name { margin: 0 0 4px; color: var(--text); font-size: .9rem; font-weight: 700; }
.rsm-tpl-card__desc { margin: 0 0 8px; color: var(--text-secondary); font-size: .76rem; line-height: 1.5; }

.rsm-tpl-card__ats {
    display: block;
    color: var(--ink-4);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rsm-tpl-card__use {
    margin: 12px 15px 15px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--bg-soft);
    font-size: .78rem;
    font-weight: 650;
    text-align: center;
}

.rsm-tpl-card.is-active .rsm-tpl-card__use {
    border-color: var(--accent);
    color: var(--on-brand);
    background: var(--accent);
}

.rsm-note {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    background: var(--bg-soft);
    font-size: .78rem;
    line-height: 1.6;
}

/* ===============================================================
   6. Step 6 — Download
   =============================================================== */

.rsm-download {
    max-width: 640px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.rsm-summary { display: grid; gap: 1px; margin: 0 0 18px; }
.rsm-summary__row { display: flex; gap: 12px; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); }
.rsm-summary__row dt { color: var(--text-secondary); font-size: .8rem; }
.rsm-summary__row dd { margin: 0; color: var(--text); font-size: .8rem; font-weight: 650; text-align: right; }

.rsm-download__note {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 3px solid var(--warn);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text);
    background: var(--warn-bg);
    font-size: .78rem;
    line-height: 1.5;
}

.rsm-download__note[hidden] { display: none !important; }

.rsm-download__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rsm-download__meta { margin: 16px 0 0; color: var(--ink-4); font-size: .74rem; line-height: 1.6; }

.rsm-wizard-nav {
    display: flex;
    gap: 10px;
    justify-content: space-between;

    /*
     * Pinned to the bottom of the viewport for as long as the wizard is on
     * screen. Continue used to sit at the very end of the step, so after an
     * import the visitor had to scroll past the whole verify list just to
     * reach it — the one control that moves them forward was the hardest to
     * find.
     *
     * Sticky rather than fixed: the bar keeps its own place in the flow, so
     * when the end of the wizard is reached it settles there naturally and
     * the last control is never hidden behind it.
     */
    position: sticky;
    bottom: 0;
    z-index: 40;

    margin-top: 24px;
    padding: 14px 0 16px;
    border-top: 1px solid var(--border);

    /* Opaque, because content scrolls underneath the pinned bar. Matches
       the card the wizard lives in, so it reads as part of it rather than
       as a strip laid over the top. */
    background: var(--surface);
}

.rsm-wizard-nav[hidden] { display: none !important; }
.rsm-wizard-nav .btn { min-width: 130px; justify-content: center; }

/* Tabbing into a field near the bottom must not scroll it underneath the
   pinned bar. --rsm-nav-h is 0px on every page without a wizard, so this is
   a no-op elsewhere. */
html { scroll-padding-bottom: calc(var(--rsm-nav-h, 0px) + 12px); }

.rsm-muted { color: var(--ink-4); font-size: .82rem; }

/* ===============================================================
   7. Form controls and field layout
   ===============================================================
   The resume form used to inherit its inputs from tool.css, which
   styles them by `type` attribute:

       input[type="number"], input[type="text"], select { … }

   Email, tel, url and textarea never matched, so half of every section
   fell back to raw browser rendering — 21px tall, square, native grey
   border — next to styled siblings. That mixture was the main reason
   the builder read as unfinished.

   These rules match on the control CLASS instead, so every field looks
   the same whatever its type. Scoped to .rsm-wizard so nothing leaks
   into the image tools, which share tool.css.
   =============================================================== */

.rsm-wizard .control__input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-size: .9rem;
    line-height: 1.45;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

/* A native select arrow cannot be positioned, so draw our own. */
.rsm-wizard select.control__input {
    padding-right: 36px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                      linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 2px),
                         calc(100% - 14px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.rsm-wizard textarea.control__input {
    min-height: 0;
    resize: vertical;
}

.rsm-wizard .control__input::placeholder { color: var(--ink-4); }

.rsm-wizard .control__input:hover { border-color: var(--ink-4); }

.rsm-wizard .control__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.rsm-wizard .control__input:disabled {
    color: var(--ink-4);
    background: var(--bg-muted);
    cursor: not-allowed;
}

.rsm-wizard .control__label {
    display: block;
    margin: 0 0 6px;
    color: var(--ink-2);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.rsm-wizard .control__help {
    margin: 6px 0 0;
    color: var(--ink-4);
    font-size: .74rem;
    line-height: 1.5;
}

/* --- field layout ----------------------------------------------
   tool.css's grid is `1fr auto 1fr` — written for the resize tool's
   "width × height" row. Reused here it produced columns of 265 / 185 /
   265px, so nothing lined up. Two equal columns suit this form: the
   schema marks wide fields `span: 2`, which becomes a full row. */

.rsm-wizard .field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: start;
}

.rsm-wizard .field-grid .field {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.rsm-wizard .field-grid .field--wide { grid-column: 1 / -1; }

.rsm-wizard .field-grid .field label {
    font-size: .78rem;
    font-weight: 650;
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0;
}

.rsm-wizard .field--checkbox { align-self: center; }

.rsm-wizard .field .check {
    min-height: 42px;
    font-size: .85rem;
}

.rsm-sec {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.rsm-sec__head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
    transition: background .15s;
}

.rsm-sec__head::-webkit-details-marker { display: none; }
.rsm-sec__head:hover { background: var(--bg-soft); }
.rsm-sec__head:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rsm-sec__title { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: .92rem; font-weight: 700; }

.rsm-sec__meta {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-soft);
    font-size: .7rem;
    font-weight: 650;
    white-space: nowrap;
}

/* A <details> with its native marker suppressed showed no sign it could be
   opened. This chevron is the only affordance, so it has to be visible and
   rotate with the state. */
.rsm-sec__head::after {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: 0 3px 3px 2px;
    border-right: 1.5px solid var(--ink-4);
    border-bottom: 1.5px solid var(--ink-4);
    content: "";
    transform: rotate(45deg);
    transition: transform .18s ease-out;
}

.rsm-sec[open] .rsm-sec__head {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.rsm-sec[open] .rsm-sec__head::after { margin-bottom: 0; transform: rotate(225deg); }

.rsm-sec__body { padding: 14px; }

.rsm-sec--optional .rsm-sec__head,
.rsm-sec--data .rsm-sec__head { background: var(--bg-soft); }

.rsm-sec--data[open] .rsm-sec__head { background: var(--bg-soft); }

/* --- rows ----------------------------------------------------- */

.rsm-rows { display: grid; gap: 8px; }

.rsm-rows__empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 9px;
    color: var(--ink-4);
    font-size: .78rem;
    text-align: center;
}

.rsm-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
    overflow: hidden;
}

.rsm-row.is-dragging { opacity: .5; border-color: var(--brand); }

.rsm-row__head {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 7px 9px;
}

.rsm-row__grip {
    flex: 0 0 auto;
    padding: 0 3px;
    color: var(--ink-4);
    font-size: .8rem;
    letter-spacing: -2px;
    cursor: grab;
    user-select: none;
}

.rsm-row__grip:active { cursor: grabbing; }

.rsm-row__toggle {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 4px;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rsm-row__text { display: block; min-width: 0; }

.rsm-row__title {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rsm-row__meta {
    display: block;
    overflow: hidden;
    color: var(--ink-4);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rsm-row__actions { display: flex; flex: 0 0 auto; gap: 3px; }

.rsm-row__body {
    padding: 0 10px 11px;
    border-top: 1px solid var(--border);
}

.rsm-row:not(.is-open) .rsm-row__body { display: none; }
.rsm-row.is-open .rsm-row__body { display: block; margin-top: 10px; }

.rsm-add { width: 100%; margin-top: 9px; justify-content: center; }

/* --- chips ---------------------------------------------------- */

.rsm-chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.rsm-chips__empty { color: var(--ink-4); font-size: .76rem; }

.rsm-chip {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 4px 5px 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-muted);
    font-size: .76rem;
}

.rsm-chip__name { color: var(--ink); font-weight: 600; }

.rsm-chip__level {
    max-width: 108px;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--ink-2);
    background: var(--surface);
    font-size: .68rem;
}

.rsm-chip__actions { display: inline-flex; gap: 1px; }

.rsm-chip__actions .icon-btn { width: 21px; height: 21px; font-size: .76rem; }

.rsm-chip-add { display: flex; gap: 6px; }
.rsm-chip-add .control__input { flex: 1 1 auto; }

/* --- photo ---------------------------------------------------- */

.rsm-photo-row {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 6px;
}

.rsm-photo-preview {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-muted);
}

.rsm-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.rsm-photo-empty { color: var(--ink-4); font-size: .6rem; }

.rsm-photo-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* --- AI button ------------------------------------------------ */

.rsm-ai {
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--ink-3);
    background: var(--surface-muted);
    font-size: .66rem;
    font-weight: 650;
    letter-spacing: .02em;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.rsm-ai:hover { border-color: var(--brand); color: var(--brand-strong); }

/* A request can take several seconds (a cold model has to load), so the
   button says what it is doing rather than appearing to have ignored the
   click. */
.rsm-ai.is-busy {
    border-style: solid;
    border-color: var(--brand);
    color: var(--brand-strong);
    cursor: progress;
}

.rsm-ai:disabled { cursor: progress; }

/* Shown as plainly unavailable rather than hidden, so the feature is
   discoverable without ever looking broken. */
.rsm-ai.is-unavailable {
    border-style: dashed;
    color: var(--ink-4);
}

/* --- restore banner ------------------------------------------- */

/* The banner itself is styled with the wizard shell in section 1. */

/* ===============================================================
   8. Appearance controls and the preview stage
   =============================================================== */

.rsm-controls {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.rsm-controls__title {
    margin: 0 0 14px;
    color: var(--text);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rsm-control { margin-bottom: 14px; }
.rsm-control:last-child { margin-bottom: 0; }
.rsm-control .control__label { display: block; margin-bottom: 5px; }

.rsm-range { width: 100%; accent-color: var(--accent); }

.rsm-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.rsm-presets .btn { flex: 1 1 auto; justify-content: center; }

.rsm-preview-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* The preview step gains a third column, so the page widens to make room
   for it. Widening the container rather than the sheet is the whole point:
   the A4 preview keeps the size it already had, and the space that was
   sitting empty to the right of it does the work. */
.container:has(.rsm-wizard[data-step="5"]) { --container: 1560px; }

.rsm-preview-pane { min-width: 0; }

/* Below this width the sheet needs the room more than the list does, so the
   list drops underneath and lays its items out in a row. */
.rsm-template-picker { grid-column: 1 / -1; }

@media (min-width: 1180px) {
    .rsm-preview-layout { grid-template-columns: 260px minmax(0, 1fr) 288px; }
    .rsm-template-picker { grid-column: auto; }
}

.rsm-template-picker {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.rsm-template-picker__list { display: grid; gap: 8px; }

@media (min-width: 1180px) {
    /* Tall enough to show the whole set on a normal screen. At 30rem the
       fifth card was sliced in half by the scroll box, which reads as a
       rendering fault rather than as "there is more below". */
    .rsm-template-picker__list { max-height: min(48rem, 78vh); overflow-y: auto; }
}

@media (max-width: 1179px) {
    .rsm-template-picker__list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.rsm-tpl {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 9px;

    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    background: var(--bg-soft);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.rsm-tpl:hover { border-color: var(--brand-border); background: var(--accent-soft); }

.rsm-tpl.is-current {
    border-color: var(--brand-border);
    border-left-color: var(--brand-strong);
    background: var(--accent-soft);
}

/* The miniature is scaled with a transform, so its frame owns the size and
   clips whatever the untransformed sheet would otherwise overflow. */
.rsm-tpl__thumb {
    flex: none;
    width: 62px;
    height: 88px;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 3px;
    background: #ffffff;
}

.rsm-tpl__mount { display: block; }

/* The sheet inside is a real A4 render at full size; the transform on
   .rsm-pages shrinks it. Pointer events belong to the button, not to the
   miniature it contains.

   The origin has to be set on .rsm-pages, which is the element the transform
   is applied to — setting it on the wrapper does nothing. Without it the sheet
   scales about its centre and slides sideways, leaving the content stranded
   in the right half of the thumbnail. Every other scaled sheet on the site
   anchors the same way. */
.rsm-tpl__mount .rsm-pages {
    transform-origin: top left;
    pointer-events: none;
}

.rsm-tpl__text { display: grid; gap: 3px; min-width: 0; }

.rsm-tpl__name { color: var(--text); font-size: .84rem; font-weight: 650; }

.rsm-tpl__desc {
    color: var(--ink-3);
    font-size: .72rem;
    line-height: 1.4;
    /* Three lines is enough to choose from; the full text is on the
       templates step. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rsm-template-picker__note {
    margin: 12px 0 0;
    color: var(--ink-4);
    font-size: .74rem;
    line-height: 1.45;
}

.rsm-zoom-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--surface);
}

.rsm-zoom-bar__label {
    color: var(--ink-4);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* One segmented control reads as a single instrument; four separate
   buttons read as four unrelated actions. */
.rsm-zoom {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
}

.rsm-zoom__btn {
    width: 34px;
    height: 34px;
    border: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.rsm-zoom__btn:hover { background: var(--bg-muted); }
.rsm-zoom__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

.rsm-zoom__value {
    min-width: 54px;
    color: var(--text-secondary);
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.rsm-zoom-bar__reset {
    padding: 0;
    border: 0;
    color: var(--accent);
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rsm-zoom-bar__reset:hover { color: var(--accent-hover); }

.rsm-zoom-bar__status { margin-left: auto; color: var(--ink-4); font-size: .73rem; }

.rsm-stage {
    --rsm-zoom: 1;
    max-height: 74vh;
    padding: 18px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--bg-muted);
    overscroll-behavior: contain;
}

.rsm-stage__inner { display: flex; justify-content: center; }

.rsm-pages {
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: scale(var(--rsm-zoom));
    transform-origin: top center;
}

.rsm-empty {
    margin: 0;
    padding: 60px 20px;
    color: var(--ink-4);
    font-size: .82rem;
    text-align: center;
}

.rsm-doc--unmeasured { visibility: hidden; }

/* ===============================================================
   9. The resume document
   ===============================================================
   Literal colours on purpose: this is a document, not site chrome.
   =============================================================== */

.rsm-doc {
    --rsm-accent: #1f2937;
    --rsm-body: 10.8pt;
    --rsm-leading: 1.45;
    --rsm-block-gap: 9pt;
    --rsm-heading-transform: uppercase;
    --rsm-page-w: 210mm;
    --rsm-page-h: 297mm;
    --rsm-pad: 16mm;

    /* Both of these are set inline by the renderer from the visitor's
       choices, so these defaults are only a fallback. They must be read
       here as variables — hardcoding the family once made the serif
       option change the PDF while leaving the preview in Helvetica. */
    --rsm-font: Helvetica, "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;

    color: #111827;
    font-family: var(--rsm-font);
    font-size: var(--rsm-body);
    line-height: var(--rsm-leading);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.rsm-page {
    position: relative;
    width: var(--rsm-page-w);
    height: var(--rsm-page-h);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(16, 24, 40, .18);
}

.rsm-page__inner { height: 100%; }

.rsm-flow { height: 100%; }

.rsm-page__num {
    position: absolute;
    right: 12px;
    bottom: 7px;
    color: #9ca3af;
    font-size: 7.5pt;
}

/* Blocks carry the vertical rhythm so pagination can measure them. */
.rsm-block { margin-bottom: var(--rsm-block-gap); }
.rsm-block:last-child { margin-bottom: 0; }

.rsm-block[data-kind="bullet"],
.rsm-block[data-kind="meta"] { margin-bottom: calc(var(--rsm-block-gap) * .18); }

.rsm-block[data-kind="entry-head"] { margin-bottom: calc(var(--rsm-block-gap) * .3); }

.rsm-block[data-kind="section-title"] { margin-top: calc(var(--rsm-block-gap) * .55); }

/* --- header ---------------------------------------------------- */

.rsm-header { display: flex; gap: 16px; align-items: center; }

.rsm-photo {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
}

.rsm-header__text { min-width: 0; }

.rsm-name {
    margin: 0;
    color: #111827;
    font-size: 21pt;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.rsm-jobtitle {
    margin: 3pt 0 0;
    color: #4b5563;
    font-size: 11.5pt;
    font-weight: 500;
}

.rsm-contact {
    margin: 5pt 0 0;
    color: #4b5563;
    font-size: 9pt;
    line-height: 1.45;
}

.rsm-contact__sep { color: #9ca3af; }

/* --- sections -------------------------------------------------- */

.rsm-section-title {
    margin: 0;
    color: #111827;
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: var(--rsm-heading-transform);
}

.rsm-rule { height: 1px; margin-top: 3pt; background: #d1d5db; }

.rsm-p { margin: 0; }
.rsm-p--lead { margin-top: 1pt; }

.rsm-inline,
.rsm-skills-inline,
.rsm-link,
.rsm-meta { margin: 0; }
.rsm-meta { color: #4b5563; font-size: .94em; }
.rsm-link { color: #4b5563; font-size: .94em; word-break: break-word; }

.rsm-entry-head { display: block; }

.rsm-entry-head__main {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.rsm-entry-title { font-weight: 700; }

.rsm-entry-dates {
    flex: 0 0 auto;
    color: #4b5563;
    font-size: .94em;
    white-space: nowrap;
}

.rsm-entry-sub { color: #4b5563; font-size: .94em; margin-top: 1pt; }

/* --- lists ----------------------------------------------------- */

.rsm-bullets {
    margin: 1pt 0 0;
    padding: 0 0 0 13pt;
    list-style: none;
}

.rsm-bullets li { position: relative; }

.rsm-bullets li::before {
    position: absolute;
    left: -11pt;
    content: "\2022";
    color: #6b7280;
}

.rsm-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14pt;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsm-skill { display: inline-flex; gap: 5pt; align-items: baseline; }
.rsm-skill__level { color: #6b7280; font-size: .9em; }

/* ===============================================================
   10. Templates
   =============================================================== */

/* --- Classic ATS: centred header, rules under headings -------- */
.rsm-doc[data-template="classic"] .rsm-header--centered {
    display: block;
    text-align: center;
}

.rsm-doc[data-template="classic"] .rsm-header--centered .rsm-header__text { display: block; }

.rsm-doc[data-template="classic"] .rsm-photo { margin: 0 auto 8pt; }

/* --- Modern Professional: accent band ------------------------- */
.rsm-doc[data-template="modern"] .rsm-header--banded {
    display: block;
    margin: -16mm -16mm var(--rsm-block-gap);
    padding: 13mm 16mm 11mm;
    color: #ffffff;
    background: var(--rsm-accent);
}

.rsm-doc[data-template="modern"] .rsm-header--banded .rsm-name { color: #ffffff; }
.rsm-doc[data-template="modern"] .rsm-header--banded .rsm-jobtitle { color: #e5e7eb; }
.rsm-doc[data-template="modern"] .rsm-header--banded .rsm-contact { color: #d1d5db; }
.rsm-doc[data-template="modern"] .rsm-header--banded .rsm-contact__sep { color: #9ca3af; }

.rsm-doc[data-template="modern"] .rsm-section-title { color: var(--rsm-accent); }
.rsm-doc[data-template="modern"] .rsm-rule { height: 1.5px; background: var(--rsm-accent); }

/* --- Minimal: no rules, more air ------------------------------ */
.rsm-doc[data-template="minimal"] { --rsm-block-gap: 11pt; }
.rsm-doc[data-template="minimal"] .rsm-section-title { color: #374151; font-size: 9.2pt; letter-spacing: .1em; }
.rsm-doc[data-template="minimal"] .rsm-name { font-size: 19pt; font-weight: 600; letter-spacing: 0; }
.rsm-doc[data-template="minimal"] .rsm-entry-title { font-weight: 600; }
.rsm-doc[data-template="minimal"] .rsm-bullets { padding-left: 0; }
.rsm-doc[data-template="minimal"] .rsm-bullets li::before { content: ""; }
.rsm-doc[data-template="minimal"] .rsm-bullets li { padding-left: 0; }

/* --- Technical: tighter, accent job title --------------------- */
.rsm-doc[data-template="technical"] { --rsm-block-gap: 8pt; }
.rsm-doc[data-template="technical"] .rsm-jobtitle { color: var(--rsm-accent); font-weight: 600; }
.rsm-doc[data-template="technical"] .rsm-section-title { letter-spacing: .09em; }
.rsm-doc[data-template="technical"] .rsm-skills-inline { font-size: .97em; }

/* --- Bold Header ------------------------------------------------
   A solid block of the chosen accent behind the name. The text is
   reversed out of it, so the band has to be printable — see the
   print-color-adjust rule further down, or printers drop the fill and
   leave white text on white paper. */
.rsm-doc[data-template="bold"] { --rsm-block-gap: 10pt; }

.rsm-doc[data-template="bold"] .rsm-header--banner {
    /* Bleed to the page edges using whatever margin is in force (11mm, 16mm
       or 24mm), so the band cannot float inside the margin on one setting
       and overhang the page on another. The horizontal padding puts the
       name back on the same left edge as the body text. */
    margin: calc(var(--rsm-pad) * -1) calc(var(--rsm-pad) * -1) 10pt;
    padding: 9mm var(--rsm-pad) 7mm;
    background: var(--rsm-accent);
    text-align: left;
}

.rsm-doc[data-template="bold"] .rsm-header--banner .rsm-name {
    color: #ffffff;
    font-size: 25pt;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.05;
}

.rsm-doc[data-template="bold"] .rsm-header--banner .rsm-jobtitle {
    color: rgba(255, 255, 255, .92);
    font-size: 11pt;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rsm-doc[data-template="bold"] .rsm-header--banner .rsm-contact { color: rgba(255, 255, 255, .88); }
.rsm-doc[data-template="bold"] .rsm-header--banner .rsm-contact__sep { color: rgba(255, 255, 255, .6); }

.rsm-doc[data-template="bold"] .rsm-section-title {
    color: var(--rsm-accent);
    font-size: 10pt;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rsm-doc[data-template="bold"] .rsm-rule { height: 2.5px; background: var(--rsm-accent); }

/* --- Timeline ---------------------------------------------------
   Each role carries a short accent bar beside its heading, so a career
   reads as a series of markers down one column. The bar is a border on
   the heading, not an element in the text flow, so the reading order a
   parser sees is unchanged. */
.rsm-doc[data-template="timeline"] { --rsm-block-gap: 12pt; }

.rsm-doc[data-template="timeline"] .rsm-section-title {
    color: #111827;
    font-size: 9.6pt;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.rsm-doc[data-template="timeline"] .rsm-rule { height: 1px; background: var(--rsm-accent); }

.rsm-doc[data-template="timeline"] .rsm-entry-head {
    padding-left: 9pt;
    border-left: 2.5px solid var(--rsm-accent);
}

.rsm-doc[data-template="timeline"] .rsm-entry-dates {
    color: var(--rsm-accent);
    font-weight: 600;
}

/* Hanging indent so the dashes line up under the role heading rather than
   under the accent bar it sits beside. */
.rsm-doc[data-template="timeline"] .rsm-bullets { padding-left: 21pt; }
.rsm-doc[data-template="timeline"] .rsm-bullets li::before { content: "\2013"; }

/* --- Elegant ---------------------------------------------------- */
.rsm-doc[data-template="elegant"] { --rsm-block-gap: 14pt; }

.rsm-doc[data-template="elegant"] .rsm-header--centered { text-align: center; }

.rsm-doc[data-template="elegant"] .rsm-name {
    font-size: 23pt;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.rsm-doc[data-template="elegant"] .rsm-jobtitle {
    font-size: 10.5pt;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #4b5563;
}

/* .rsm-contact is a plain paragraph, not a flex row — the separators are
   inline — so centring comes from the header's text-align and nothing else
   is needed here. */
.rsm-doc[data-template="elegant"] .rsm-header--centered .rsm-contact { margin-inline: auto; }

/* A hairline pair, which reads as a rule without weighing like one. */
.rsm-doc[data-template="elegant"] .rsm-rule {
    height: 3px;
    background: none;
    border-top: 1px solid #9ca3af;
    border-bottom: 1px solid #9ca3af;
}

.rsm-doc[data-template="elegant"] .rsm-section-title {
    font-size: 10pt;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #1f2937;
}

.rsm-doc[data-template="elegant"] .rsm-entry-title { font-weight: 600; }

/* ===============================================================
   11. Template gallery + template picker
   =============================================================== */

.rsm-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 16px;
}

@media (max-width: 1040px) {
    .rsm-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .rsm-gallery { grid-template-columns: 1fr; }
}

.rsm-gallery__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}

.rsm-gallery__item:hover {
    border-color: var(--brand-border);
    box-shadow: var(--shadow-md);
}

/* The whole preview is the control that opens the full-size dialog, so
   the click target matches what the visitor is looking at. */
.rsm-gallery__preview {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
    font: inherit;
    cursor: zoom-in;
}

.rsm-gallery__preview:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* width:100% is load-bearing, not decoration. The frame sits inside a
   <button>, where the content box shrink-wraps, and the script sizes the
   holder from the frame's width — so frame and holder sized each other and
   settled at 226px inside a 394px card. An explicit width breaks that
   loop. */
.rsm-gallery__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 210 / 297;
    overflow: hidden;
}

/* The script sizes this to exactly the scaled first page. That is what
   lets the sheet be centred while still scaling from its top-left corner:
   scaling a centred 794px box from `top left` leaves its origin ~268px to
   the left of the frame and the sheet renders entirely off-screen. */
.rsm-gallery__holder {
    flex: none;
    overflow: hidden;
}

.rsm-gallery__holder .rsm-pages { transform-origin: top left; }

/* A hover/focus cue along the bottom edge. It sat in the top-right corner
   at first and covered the resume header — the one part of the page a
   visitor actually reads in a thumbnail. */
.rsm-gallery__hint {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 30px 12px 13px;
    color: #ffffff;
    background: linear-gradient(to top, rgba(15, 23, 42, .85), rgba(15, 23, 42, 0));
    font-size: .78rem;
    font-weight: 650;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease-out;
}

.rsm-gallery__preview:hover .rsm-gallery__hint,
.rsm-gallery__preview:focus-visible .rsm-gallery__hint { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .rsm-gallery__hint { transition: none; }
}

.rsm-gallery__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
}

.rsm-gallery__head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    justify-content: space-between;
}

.rsm-gallery__name { margin: 0; color: var(--text); font-size: .96rem; font-weight: 700; }

.rsm-gallery__ats {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rsm-gallery__ats[data-level="best"] {
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
    color: var(--ok);
    background: var(--ok-bg);
}

.rsm-gallery__desc { margin: 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.55; }

.rsm-gallery__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
}

.rsm-gallery__actions .btn { flex: 1 1 auto; justify-content: center; }
.rsm-gallery__actions .rsm-gallery__preview-btn { flex: 0 0 auto; }

/* --- full-size preview dialog ---------------------------------- */

.rsm-modal {
    width: min(1100px, calc(100vw - 28px));
    max-width: none;
    max-height: calc(100vh - 28px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(16, 24, 40, .28));
}

/* Only lay out when open. A bare `display: grid` here would beat the
   UA rule that hides a closed <dialog>, leaving it on screen. */
.rsm-modal[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.rsm-modal::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}

.rsm-modal__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.rsm-modal__title { margin: 0 0 3px; color: var(--text); font-size: 1.1rem; font-weight: 700; }
.rsm-modal__sub { max-width: 74ch; margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.55; }

.rsm-modal__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    background: var(--surface);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.rsm-modal__close:hover { border-color: var(--ink-4); color: var(--text); background: var(--bg-soft); }
.rsm-modal__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rsm-modal__stage {
    padding: 22px;
    overflow: auto;
    background: var(--bg-muted);
    overscroll-behavior: contain;
}

/* Sized by the script to the whole scaled document. Centred with an auto
   margin rather than flex so a two-page resume stays centred on its full
   width, and no page is ever clipped. */
.rsm-modal__holder { margin: 0 auto; }
.rsm-modal__holder .rsm-pages { transform-origin: top left; }
.rsm-modal__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.rsm-modal__nav { display: inline-flex; gap: 6px; margin-right: auto; }
.rsm-modal__count { align-self: center; color: var(--ink-4); font-size: .74rem; font-variant-numeric: tabular-nums; }
.rsm-modal__note { flex: 1 1 240px; margin: 0; color: var(--ink-4); font-size: .74rem; line-height: 1.5; }

@media (max-width: 620px) {
    .rsm-modal__stage { padding: 12px; }
    .rsm-modal__head { padding: 14px 16px; }
    .rsm-modal__foot { padding: 12px 16px; }
    .rsm-modal__nav, .rsm-modal__foot .btn { width: 100%; }
    .rsm-modal__nav .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===============================================================
   12. ATS checker + keyword matcher
   =============================================================== */

.rsm-two-up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.rsm-drop {
    display: grid;
    gap: 7px;
    place-items: center;
    width: 100%;
    padding: 26px 18px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--ink-3);
    background: var(--surface-muted);
    font-size: .8rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.rsm-drop.is-dragover { border-color: var(--brand); background: var(--surface); }
.rsm-drop__title { color: var(--ink); font-size: .84rem; font-weight: 650; }
.rsm-drop__sub { font-size: .74rem; }

.rsm-report { display: grid; gap: 14px; margin-top: 16px; }
.rsm-report[hidden] { display: none !important; }

.rsm-checks {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--border);
}

.rsm-check-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding: 9px 12px;
    background: var(--surface);
    font-size: .8rem;
}

.rsm-check-row__label { color: var(--ink-2); }

.rsm-check-row__state {
    flex: 0 0 auto;
    font: 700 .74rem var(--mono);
    letter-spacing: .02em;
}

.rsm-check-row[data-state="pass"] .rsm-check-row__state { color: var(--ok); }
.rsm-check-row[data-state="warn"] .rsm-check-row__state { color: var(--warn); }
.rsm-check-row[data-state="info"] .rsm-check-row__state { color: var(--ink-4); }

.rsm-check-row__detail {
    display: block;
    margin-top: 3px;
    color: var(--ink-4);
    font-size: .74rem;
    line-height: 1.45;
}

.rsm-issues { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.rsm-issues li { display: flex; gap: 8px; padding: 9px 11px; border-radius: 8px; background: var(--surface-muted); font-size: .78rem; line-height: 1.5; }
.rsm-issues li[data-level="warn"] { border-left: 3px solid var(--warn); }
.rsm-issues li[data-level="info"] { border-left: 3px solid var(--border-strong); }
.rsm-issues li[data-level="ok"] { border-left: 3px solid var(--ok); }

.rsm-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.rsm-keyword {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: .76rem;
}

.rsm-keyword[data-state="matched"] { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); background: var(--ok-bg); }
.rsm-keyword[data-state="missing"] { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); background: var(--warn-bg); }
.rsm-keyword__count { color: inherit; font-size: .68rem; opacity: .75; }

.rsm-score { display: flex; gap: 16px; align-items: baseline; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); }
.rsm-score__value { color: var(--ink); font: 700 1.5rem/1 var(--mono); }
.rsm-score__label { color: var(--ink-3); font-size: .78rem; }

/* ===============================================================
   13. Responsive
   =============================================================== */

@media (max-width: 1080px) {
    .rsm-build { grid-template-columns: 1fr; }
    .rsm-completeness { position: static; }
    .rsm-preview-layout { grid-template-columns: 1fr; }
}

/* On phones the horizontal stepper is unreadable, so it collapses to a
   single "Step 2 of 6" line and the controls get full-width touch
   targets. */
@media (max-width: 820px) {
    .rsm-stepper { display: none; }
    .rsm-step-mobile { display: block; }

    .rsm-preview-layout { gap: 14px; }
    .rsm-stage { max-height: none; padding: 12px; }
    .rsm-stage__inner { justify-content: flex-start; }

    .rsm-wizard-nav { flex-direction: column-reverse; }
    .rsm-wizard-nav .btn { width: 100%; min-height: 46px; }
    .rsm-download__actions .btn { flex: 1 1 100%; min-height: 46px; }

    /* The template grid is an explicit two columns, so it needs telling
       to collapse — unlike the old auto-fit version, which did this by
       itself. Two previews at 170px each would be unreadable. */
    .rsm-tpl-grid { grid-template-columns: 1fr; }
    .rsm-tpl-card__frame { height: 240px; }
}

/* ===============================================================
   14. Print — produce a clean A4 document
   ===============================================================
   Only the pages themselves are printed: no header, no buttons, no
   toolbar, and never an advertisement.
   =============================================================== */

@media print {
    @page { size: A4; margin: 0; }

    html, body {
        width: 210mm;
        background: #ffffff !important;
    }

    /* -------------------------------------------------------------
       Order matters here. The page furniture is stripped first, then
       the resume containers are unwrapped, and finally anything that
       should not be printed is hidden again — because several of those
       elements are also .container, and an unhide rule that comes later
       would otherwise win on equal specificity.
       ------------------------------------------------------------- */

    .site-main,
    .container,
    .container.section,
    .tool-page__body,
    .tool-page__main,
    .tool-shell,
    .tool-app,
    .rsm-wizard,
    .rsm-preview-layout,
    .rsm-preview-pane,
    .rsm-stage,
    .rsm-stage__inner {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .rsm-pages {
        display: block !important;
        gap: 0 !important;
        transform: none !important;
    }

    .rsm-page {
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        box-shadow: none !important;
        page-break-after: always;
        break-after: page;
        overflow: hidden;
    }

    .rsm-page:last-child { page-break-after: auto; break-after: auto; }

    /* Never split a block across two sheets: the pagination already
       placed it, and a break inside it would overlap text. */
    .rsm-block { break-inside: avoid; page-break-inside: avoid; }

    .rsm-page__num { display: none !important; }

    .rsm-doc { color: #000000 !important; }

    /* Keep the accent band from being dropped by print settings. Without
       this the fill disappears and a reversed-out name prints white on
       white. */
    .rsm-doc[data-template="modern"] .rsm-header--banded,
    .rsm-doc[data-template="bold"] .rsm-header--banner {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Whatever step the visitor is on, the printed sheet is the preview
       — so the preview panel is forced visible and every other panel is
       forced hidden, overriding the [hidden] attribute both ways. */
    .rsm-step-panel[data-step-panel="5"] {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .rsm-step-panel[data-step-panel]:not([data-step-panel="5"]) { display: none !important; }

    /* Everything that must not appear on the printed sheet. Listed last
       so it beats the .container rule above. */
    .site-header,
    .site-footer,
    .skip-link,
    .breadcrumbs,
    .container.tool-page__head,
    .tool-page__badge,
    .rsm-wizard__head,
    .rsm-stepper,
    .rsm-step-mobile,
    .rsm-alert,
    /* Fixed to the viewport, so it is not hidden by the step-panel rule
       above — without this it prints on top of the resume. */
    .rsm-ai-wait,
    .rsm-restore,
    .rsm-step-panel__title,
    .rsm-step-panel__lede,
    .rsm-controls,
    /* The picker lives inside step 5, which the print block forces visible,
       so it needs hiding in its own right or it prints onto the resume. */
    .rsm-template-picker,
    .rsm-zoom-bar,
    .rsm-note,
    .rsm-download,
    .rsm-wizard-nav,
    .rsm-sec,
    .rsm-raw,
    .rsm-warning-box,
    .rsm-privacy-inline,
    .rsm-templates-strip,
    .privacy-note,
    .container .privacy-note,
    .tool-note,
    .ad-slot,
    aside[role="complementary"],
    .container .content-block,
    .content-block,
    .container .tool-alert,
    .tool-alert,
    .no-print {
        display: none !important;
    }
}