/*
 * Isolated stylesheet for the CV builder workspace (/cv/*).
 * Loaded on its own, without frontv1/frontv2's main.css, so it never
 * inherits or clashes with the rest of the application styles.
 */

.resume-builder-body {
    background: #f1f3f5;
}

.resume-builder-topbar-group {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* A floating, dismissible card instead of a bar pushed into the topbar's
   own flow - closing it (Alpine-only, never sent to the server) must
   never resize anything else in the layout underneath it. */
.resume-floating-notice {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: calc(100% - 2rem);
    max-width: 400px;
    z-index: 1000;
}

/* Replaces the old Bootstrap .alert-danger banner: a Barma persuasion
   moment (why this template is worth unlocking, what unlocking buys),
   not a generic error box - see .resume-ats-barma-intro for the same
   avatar-plus-message idea used elsewhere in the builder. */
.resume-unlock-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(105deg, #faf8ff, #f2edff);
    border: 1px solid #e0d5ff;
    border-radius: 0.85rem;
    box-shadow: 0 0.75rem 2rem rgba(40, 20, 90, 0.16);
}

.resume-unlock-banner .resume-ai-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.resume-unlock-banner-body {
    flex: 1 1 auto;
    min-width: 0;
}

.resume-unlock-banner-body span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #7c5cff;
    margin-bottom: 0.15rem;
}

.resume-unlock-banner-body p {
    margin: 0;
    font-size: 0.88rem;
    color: #33314a;
}

.resume-unlock-banner-error {
    margin-top: 0.35rem !important;
    color: #b3261e !important;
    font-size: 0.8rem !important;
}

.resume-unlock-banner-cta {
    margin-top: 0.65rem;
}

/* A plain, non-persuasive notice (PDF generation down, a payment failed,
   etc.) - still not the old Bootstrap alert-danger box, but no Barma
   persona either: nothing here to sell, just information. */
.resume-inline-notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #ffd6d2;
    border-radius: 0.85rem;
    box-shadow: 0 0.75rem 2rem rgba(90, 20, 20, 0.14);
    color: #8a2c22;
    font-size: 0.88rem;
}

.resume-inline-notice .bi-exclamation-circle {
    flex-shrink: 0;
}

.resume-inline-notice span {
    flex: 1 1 auto;
}

.resume-floating-notice-close {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
}

/* Catches every Livewire dispatch('notify', ...) on the page - see
   components/resume/toast-listener.blade.php, included once in both
   layouts/resume-builder.blade.php and layouts/site.blade.php. Stacks
   below .resume-floating-notice (same corner) since the two can
   legitimately coexist (e.g. a toast confirming an action that also
   triggered its own floating notice elsewhere). */
.resume-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    width: calc(100% - 2rem);
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    pointer-events: none;
}

.resume-toast {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgba(20, 20, 30, 0.16);
    font-size: 0.88rem;
    pointer-events: auto;
}

.resume-toast span {
    flex: 1 1 auto;
}

.resume-toast-success {
    border: 1px solid #c3e6cb;
    color: #1e5631;
}

.resume-toast-success .bi-check-circle {
    color: #2e9e5b;
}

.resume-toast-error {
    border: 1px solid #ffd6d2;
    color: #8a2c22;
}

.resume-toast-error .bi-exclamation-circle {
    color: #c23b2e;
}

.resume-toast-close {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.resume-builder-header,
.resume-builder-subheader {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e3e6ea;
}

.resume-title-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.resume-title-caption {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #adb5bd;
    margin-bottom: 0.1rem;
}

.resume-builder-subheader .resume-title-input {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    max-width: 320px;
}

.resume-builder-subheader .resume-title-input:focus {
    background: #f8f9fa;
    outline: none;
    box-shadow: none;
    border-radius: 0.375rem;
}

.resume-save-status-pill {
    font-size: 0.8rem;
    min-width: 8rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: #f1f3f5;
    color: #495057;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.resume-token-balance {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #fff8e6;
    color: #7a5c00;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

/* Per-action token cost, shown inside an AI action button so the user knows
   what it will spend before clicking - inherits the button's own color. */
.resume-token-cost {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.75;
    margin-left: 0.3rem;
    white-space: nowrap;
}

.resume-token-cost::before {
    content: "\00b7\0020";
}

.resume-save-status-pill.is-saved {
    background: #d1e7dd;
    color: #0f5132;
}

.resume-save-status-pill.is-failed {
    background: #f8d7da;
    color: #842029;
}

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

.resume-save-status-spin {
    display: inline-block;
    animation: resume-spin 1s linear infinite;
}

/* Template picker: a centered modal with a card grid, not an anchored
   dropdown list - a dropdown stops being usable once there are dozens of
   templates rather than today's 4. */
.resume-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 34, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 40;
}

.resume-modal {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 960px;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
}

.resume-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #e3e6ea;
}

.resume-modal-header h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

/* ---- Template picker ----------------------------------------------------
 * Built for a growing catalogue (12 templates today): a wider dialog whose
 * header stays put while only the grid scrolls, and compact cards - a
 * cropped thumbnail (the top of the page is what tells templates apart),
 * flags overlaid on it, a one-line name and a two-line description. */
.resume-modal.resume-template-modal {
    max-width: min(1200px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.resume-template-modal .resume-modal-header {
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    flex-shrink: 0;
}

.resume-template-modal .resume-modal-header h2 {
    white-space: nowrap;
}

.resume-template-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-right: auto;
}

.resume-template-filter {
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    background: #fff;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    color: #495057;
    line-height: 1.4;
}

.resume-template-filter span {
    margin-left: 0.2rem;
    color: #868e96;
    font-variant-numeric: tabular-nums;
}

.resume-template-filter:hover {
    border-color: #adb5bd;
}

.resume-template-filter.is-active {
    border-color: #1e3a5f;
    background: #1e3a5f;
    color: #fff;
}

.resume-template-filter.is-active span {
    color: rgba(255, 255, 255, 0.75);
}

.resume-template-grid {
    /* A flex item's default min-height:auto kept the grid as tall as all of
       its cards, so it overflowed the dialog instead of scrolling inside it. */
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    align-content: start;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.resume-template-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.resume-template-card:hover {
    border-color: #adb5bd;
    box-shadow: 0 0.35rem 1rem rgba(15, 23, 34, 0.1);
    transform: translateY(-1px);
}

.resume-template-card:focus-visible {
    outline: 2px solid #1e3a5f;
    outline-offset: 2px;
}

.resume-template-card.is-current {
    border-color: #1e3a5f;
    box-shadow: 0 0 0 1px #1e3a5f;
}

.resume-template-card-media {
    position: relative;
    display: block;
    flex: none;
    /* The top ~80% of an A4 page: enough to tell layouts apart, less scroll. */
    aspect-ratio: 210 / 240;
    overflow: hidden;
    background: #f1f3f5;
    border-bottom: 1px solid #e3e6ea;
}

/* Out of the flow: an in-flow image imposed its own natural height on the
   box (aspect-ratio only sets a minimum), pushing the name and description
   out of cards whose thumbnail was taller than A4. */
.resume-template-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.resume-template-card-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2rem;
    color: #adb5bd;
}

.resume-template-card-flags {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    right: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.resume-template-card-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15);
}

.resume-template-card-flag.is-current {
    background: #1e3a5f;
    color: #fff;
}

.resume-template-card-flag.is-premium {
    background: #ffc107;
    color: #212529;
}

.resume-template-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.55rem 0.65rem 0.65rem;
}

.resume-template-card-name {
    overflow: hidden;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.resume-template-card-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #6c757d;
}

@media (max-width: 575.98px) {
    .resume-modal-backdrop {
        padding: 0.5rem;
    }

    .resume-template-modal .resume-modal-header {
        flex-wrap: wrap;
    }

    .resume-template-filters {
        order: 3;
        width: 100%;
    }

    .resume-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        padding: 0.75rem;
    }
}

.resume-experience-card {
    border: 1px solid #e3e6ea;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.resume-experience-card:last-child {
    margin-bottom: 0;
}

.resume-experience-card-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    font-weight: 600;
}

/* Compact list rows for Skills and Languages — no card border, just a thin
   row divider. flex-wrap: a text input + level select + button group packed
   in one flex row needs to wrap instead of overflow inside the drawer. */
.resume-skill-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f5;
    flex-wrap: wrap;
}

.resume-skill-row:last-child {
    border-bottom: none;
}

.resume-skill-level-select {
    /* Wide enough for the longest label used by either scale
       (Skills: "Intermédiaire" — Languages: "B2 — Intermédiaire avancé"). */
    max-width: 240px;
}

.resume-editor-section {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.resume-photo-preview {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/*
 * CV template typography contract
 * -------------------------------
 * Every text size below is expressed in em, relative to the selected
 * --resume-font-size on the document. Do not use rem for template text:
 * rem is tied to the browser root and silently ignores the user's font-size
 * choice. New templates must set --resume-font-size and follow this rule.
 *
 * A4 = 210mm x 297mm. The hidden source keeps its natural height so the
 * pagination script can slice it into these fixed-ratio paper previews.
 *
 * CV page margin convention
 * -------------------------
 * Every page of every template keeps its text inside the same safe area:
 * --resume-page-margin-y at the top AND bottom of EVERY page (not just the
 * first/last), --resume-page-margin-x on the left and right. Classic is the
 * reference implementation. Decoration (a sidebar, a colored rail, a band)
 * may run into the margins, text never does. Each renderer applies it:
 * - editor preview: the pagination script reads this padding and repeats
 *   it as the top/bottom margin of every sliced page;
 * - Chromium PDF: resume-print.css clones the padding onto every fragment;
 * - dompdf: no fragment cloning, so the template sets the page box margins
 *   instead (literal values there - var() doesn't resolve on `html`/@page).
 * Multi-column templates apply the same y margin to every column, so both
 * start and end at the same height, and the x margin on each column's
 * outer side (a rail's inner edge only gets --resume-page-gutter).
 * On :root, not .resume-a4-page: a template may render a column outside the
 * article (Modern's repeated rail, in print), which must see them too.
 */
:root {
    --resume-page-margin-y: 14mm;
    --resume-page-margin-x: 16mm;
    --resume-page-gutter: 8mm;
}

.resume-a4-page {
    width: 100%;
    max-width: 210mm;
    min-height: 297mm;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
    padding: var(--resume-page-margin-y) var(--resume-page-margin-x);
    font-family: var(--resume-font, Georgia, 'Times New Roman', serif);
    font-size: var(--resume-font-size, 10.5pt);
    line-height: 1.5;
    color: #212529;
}

.resume-doc-header {
    border-bottom: 2px solid var(--resume-accent, #1e3a5f);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.resume-doc-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.resume-doc-photo {
    width: 22mm;
    height: 22mm;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.resume-doc-name {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1a1a2e;
    margin-bottom: 0.15rem;
}

.resume-doc-title {
    font-size: 1.14em;
    color: var(--resume-accent, #1e3a5f);
    font-style: italic;
    margin-bottom: 0.6rem;
}

.resume-doc-contact {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1rem;
    padding: 0;
    margin: 0;
    font-size: 0.89em;
    font-family: var(--resume-font, Arial, Helvetica, sans-serif);
    color: #495057;
}

.resume-doc-contact li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.resume-doc-contact i {
    color: var(--resume-accent, #1e3a5f);
}

.resume-doc-section {
    margin-top: 1.1rem;
}

.resume-doc-section h2 {
    font-family: var(--resume-font, Arial, Helvetica, sans-serif);
    font-size: 0.91em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--resume-accent, #1e3a5f);
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
}

.resume-doc-summary {
    margin: 0;
    white-space: pre-line;
}

.resume-doc-experience+.resume-doc-experience {
    margin-top: 0.75rem;
}

.resume-doc-experience-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.resume-doc-experience-header h3 {
    font-size: 1.05em;
    font-weight: 700;
    margin: 0;
}

.resume-doc-experience-meta {
    font-family: var(--resume-font, Arial, Helvetica, sans-serif);
    font-size: 0.89em;
    color: #495057;
    margin: 0;
}

.resume-doc-experience-dates {
    font-family: var(--resume-font, Arial, Helvetica, sans-serif);
    font-size: 0.86em;
    color: #6c757d;
    white-space: nowrap;
    flex-shrink: 0;
}

.resume-doc-experience-description {
    margin: 0.25rem 0 0;
    white-space: pre-line;
}

.resume-doc-skills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0;
    margin: 0;
}

.resume-doc-skills li {
    font-size: 0.94em;
}

.resume-doc-skill-level {
    font-family: var(--resume-font, Arial, Helvetica, sans-serif);
    font-size: 0.8em;
    color: #6c757d;
    margin-left: 0.25rem;
}

/*
 * "Modern" template — a two-column sidebar layout, sans-serif throughout,
 * deliberately structured differently from "classic" (not just recolored).
 *
 * Page margin convention: the article keeps the top/bottom margin as its
 * padding (so the editor's pagination and print's cloned padding repeat it
 * on every page, for both columns alike); left/right are 0 because the
 * rail bleeds to the paper's left edge - each column pads its own sides.
 */
.resume-a4-page.resume-template-modern {
    padding: var(--resume-page-margin-y) 0;
    font-family: var(--resume-font, Arial, Helvetica, sans-serif);
}

.resume-modern-layout {
    display: flex;
    align-items: stretch;
    min-height: calc(297mm - 2 * var(--resume-page-margin-y));
}

.resume-modern-sidebar {
    flex: 0 0 35%;
    /* The colored band runs through the article's top/bottom padding to
       the paper edges; its text stays inside the margins via padding. */
    margin: calc(-1 * var(--resume-page-margin-y)) 0;
    box-sizing: border-box;
    /* In PDF mode the repeated sidebar is a sibling of the A4 article, not
       its child. Give it the same appearance variables explicitly so selected
       fonts and sizes do not fall back to the document defaults. */
    font-family: var(--resume-font, Arial, Helvetica, sans-serif);
    font-size: var(--resume-font-size, 10.5pt);
    line-height: 1.5;
    /* accent-dark, not accent - matches resume-pdf.css's rationale exactly:
       fills the whole sidebar behind white text, so needs each palette's
       darker tone for contrast. */
    background: var(--resume-accent-dark, #1e3a5f);
    color: #fff;
    padding: var(--resume-page-margin-y) calc(var(--resume-page-gutter) * 0.75) var(--resume-page-margin-y) var(--resume-page-margin-x);
}

.resume-modern-main {
    flex: 1;
    min-width: 0;
    padding: 0 var(--resume-page-margin-x) 0 var(--resume-page-gutter);
}

.resume-modern-photo {
    display: block;
    width: 26mm;
    height: 26mm;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.resume-modern-name {
    font-size: 1.54em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    word-break: break-word;
}

.resume-modern-title {
    font-size: 0.97em;
    opacity: 0.85;
    margin-bottom: 0.9rem;
}

.resume-modern-contact {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    font-size: 0.82em;
}

.resume-modern-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    word-break: break-all;
}

.resume-modern-contact i {
    opacity: 0.85;
    margin-top: 0.1rem;
}

.resume-modern-sidebar-section {
    margin-bottom: calc(1.1rem * var(--modern-details-scale, 1));
    /* Shrinks every descendant's em-based text together with it, same
       mechanism as Horizon - see
       ResumeTemplateFormatter::sidebarDensityScale(). The rail is a fixed
       one-page-height block in print/pdf mode (resume-print.css /
       resume-pdf.css) with no reflow, so a dense sidebar needs to shrink to
       fit instead of silently losing skills/languages/interests. */
    font-size: calc(1em * var(--modern-details-scale, 1));
}

.resume-modern-sidebar-section h2 {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: calc(0.3rem * var(--modern-details-scale, 1));
    margin-bottom: calc(0.5rem * var(--modern-details-scale, 1));
}

/* Skills / languages: two columns (see modern-sidebar-content.blade.php). */
.resume-modern-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(0.4rem * var(--modern-details-scale, 1)) 3mm;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.86em;
    line-height: 1.3;
}

.resume-modern-grid li {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Skill level: one segment per SkillLevel case, filled up to its rank. */
.resume-modern-meter {
    display: flex;
    gap: 0.5mm;
    margin-top: 0.25em;
}

.resume-modern-meter span {
    width: 4.5mm;
    height: 0.9mm;
    border-radius: 0.45mm;
    background: rgba(255, 255, 255, 0.25);
}

.resume-modern-meter span.is-filled {
    background: rgba(255, 255, 255, 0.9);
}

/* Language level: a short code (C2, B1, Natif) after the name. */
.resume-modern-level {
    margin-left: 0.3em;
    font-size: 0.82em;
    opacity: 0.75;
    white-space: nowrap;
}

.resume-modern-inline-list {
    margin: 0;
    font-size: 0.86em;
    line-height: 1.45;
}

.resume-modern-section {
    margin-bottom: 1.25rem;
}

.resume-modern-section h2 {
    font-size: 0.94em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--resume-accent, #1e3a5f);
    border-bottom: 2px solid var(--resume-accent, #1e3a5f);
    padding-bottom: 0.3rem;
    margin-bottom: 0.6rem;
}

.resume-modern-summary {
    font-size: 0.94em;
    margin: 0;
    white-space: pre-line;
}

.resume-modern-entry+.resume-modern-entry {
    margin-top: 0.75rem;
}

.resume-modern-entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.resume-modern-entry-header h3 {
    font-size: 0.97em;
    font-weight: 700;
    margin: 0;
}

.resume-modern-entry-meta {
    font-size: 0.86em;
    color: #495057;
    margin: 0;
}

.resume-modern-entry-dates {
    font-size: 0.8em;
    color: #6c757d;
    white-space: nowrap;
    flex-shrink: 0;
}

.resume-modern-entry-description {
    font-size: 0.91em;
    margin: 0.25rem 0 0;
    white-space: pre-line;
}

/*
 * "Prime ATS" — single-column (ATS-safe reading order), with a distinct
 * accent identity of its own (not classic's or modern's navy) and a photo.
 */
.resume-a4-page.resume-template-prime-ats {
    border-left: 3mm solid var(--resume-accent, #2f6fed);
    /* Page margin convention: the 3mm accent rail is decoration, so the
       text still starts --resume-page-margin-x from the paper's edge. */
    padding-left: calc(var(--resume-page-margin-x) - 3mm);
    font-family: var(--resume-font, Arial, Helvetica, sans-serif);
}

.resume-prime-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--resume-accent, #2f6fed);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.resume-prime-name {
    font-size: 1.83em;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.resume-prime-title {
    font-size: 1.09em;
    font-weight: 600;
    color: var(--resume-accent, #2f6fed);
    margin-bottom: 0.6rem;
}

/* Contact, skills, languages, interests: plain flowing text with "·"
 * separators - see the template's comment on ATS text extraction. */
.resume-prime-contact {
    margin: 0;
    font-size: 0.89em;
    color: #495057;
}

.resume-prime-inline-list {
    margin: 0;
    line-height: 1.6;
}

.resume-prime-item-level {
    font-size: 0.9em;
    color: #6c757d;
}

.resume-prime-sep {
    color: var(--resume-accent, #2f6fed);
    font-weight: 700;
}

.resume-prime-photo {
    width: 22mm;
    height: 22mm;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.resume-prime-section {
    margin-top: 1.1rem;
}

.resume-prime-section h2 {
    font-size: 0.91em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--resume-accent, #2f6fed);
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
}

.resume-prime-summary {
    margin: 0;
    white-space: pre-line;
}

.resume-prime-entry+.resume-prime-entry {
    margin-top: 0.75rem;
}

.resume-prime-entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.resume-prime-entry-header h3 {
    font-size: 1.05em;
    font-weight: 700;
    margin: 0;
}

.resume-prime-entry-meta {
    font-size: 0.89em;
    color: #495057;
    margin: 0;
}

.resume-prime-entry-dates {
    font-size: 0.86em;
    color: #6c757d;
    white-space: nowrap;
    flex-shrink: 0;
}

.resume-prime-entry-description {
    margin: 0.25rem 0 0;
    white-space: pre-line;
}

/*
 * "Pure ATS" — the plainest possible option: no color, no icons, no photo
 * (deliberately, even when one is set — see the template file's comment).
 */
.resume-a4-page.resume-template-pure-ats {
    font-family: var(--resume-font, 'Times New Roman', Times, serif);
    color: #000;
}

.resume-pure-header {
    /* Grayscale accent only - matches resume-pdf.css's rationale. */
    border-bottom: 1px solid var(--resume-accent, #000);
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
}

.resume-pure-name {
    font-size: 1.71em;
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.resume-pure-title {
    font-size: 1.03em;
    margin-bottom: 0.4rem;
}

.resume-pure-contact {
    font-size: 0.91em;
    margin: 0;
}

.resume-pure-section {
    margin-top: 1.1rem;
}

.resume-pure-section h2 {
    font-size: 0.94em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--resume-accent, #000);
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

.resume-pure-summary {
    margin: 0;
    white-space: pre-line;
}

.resume-pure-plain-list {
    margin: 0;
}

.resume-pure-entry+.resume-pure-entry {
    margin-top: 0.75rem;
}

.resume-pure-entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.resume-pure-entry-header h3 {
    font-size: 1.05em;
    font-weight: 700;
    margin: 0;
}

.resume-pure-entry-meta {
    font-size: 0.94em;
    margin: 0;
}

.resume-pure-entry-dates {
    font-size: 0.91em;
    white-space: nowrap;
    flex-shrink: 0;
}

.resume-pure-entry-description {
    margin: 0.25rem 0 0;
    white-space: pre-line;
}

/* End CV template typography contract */

[x-cloak] {
    display: none !important;
}

/* ==========================================================================
   Editor shell: icon rail, slide-out drawer, centered canvas.
   Desktop-first below; the mobile media query at the bottom reshapes the
   same Alpine state (section/drawerOpen/zoom) into a bottom bar + full-
   screen sheet instead of duplicating the interaction logic.
   ========================================================================== */

.resume-builder-shell {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 65px);
}

.resume-rail {
    flex: 0 0 84px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 1rem 0.5rem;
    background: #fff;
    border-right: 1px solid #e3e6ea;
    position: sticky;
    top: 65px;
    height: calc(100vh - 65px);
    overflow-y: auto;
}

.resume-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0.375rem;
    padding: 0.6rem 0.25rem;
    font-size: 0.68rem;
    color: #495057;
    text-align: center;
    line-height: 1.15;
}

.resume-rail-btn i {
    font-size: 1.1rem;
}

.resume-rail-btn:hover {
    background: #f8f9fa;
}

.resume-rail-btn.is-active {
    background: #eef3f8;
    border-left-color: #1d4ed8;
    color: #1d4ed8;
    font-weight: 600;
}

.resume-drawer {
    flex: 0 0 344px;
    width: 344px;
    background: #fff;
    border-right: 1px solid #e3e6ea;
    height: calc(100vh - 65px);
    position: sticky;
    top: 65px;
    display: flex;
    flex-direction: column;
}

.resume-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e3e6ea;
}

.resume-drawer-step {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #adb5bd;
    margin-bottom: 0.15rem;
}

.resume-drawer-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.resume-drawer-close {
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.resume-drawer-close:hover {
    color: #212529;
}

.resume-drawer-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    font-size: 0.85rem;
}

/*
 * Bootstrap's col-md-* breakpoints key off the VIEWPORT width, not the
 * drawer's own width - at a normal desktop viewport they stay 2-up even
 * inside a 344px drawer (confirmed directly: this is exactly what the
 * screenshot showed). Force one column here regardless of viewport size.
 */
.resume-drawer-body .row>[class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
}

.resume-drawer-body .row.g-3 {
    --bs-gutter-y: 0.65rem;
}

.resume-drawer-body h2.h5 {
    font-size: 0.95rem;
}

.resume-drawer-body .form-label {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

.resume-drawer-body .form-control,
.resume-drawer-body .form-select {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
}

.resume-drawer-body .form-text {
    font-size: 0.7rem;
}

.resume-drawer-body .resume-editor-section {
    padding: 1rem;
    margin-bottom: 1rem;
}

.resume-drawer-body .resume-experience-card {
    padding: 0.65rem;
    margin-bottom: 0.65rem;
}

.resume-drawer-body .resume-photo-preview {
    width: 3rem;
    height: 3rem;
}

.resume-drawer-body .btn-sm {
    font-size: 0.78rem;
    padding: 0.28rem 0.6rem;
}

.resume-canvas-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    /* Dotted canvas backdrop behind the page, matching the design-tool
       "infinite canvas" look from the mockup. */
    background-color: #eef0f3;
    background-image: radial-gradient(circle, #ced4db 1px, transparent 1px);
    background-size: 20px 20px;
}

.resume-canvas {
    position: relative;
    transform-origin: top center;
    transition: transform 0.15s ease;
    width: 100%;
    /* Contains the hidden pagination source below: it must keep its real
       210mm width to be measured, but as an overflowing absolute child it
       widened the whole document on a phone (~800px on a 375px screen), so
       the browser zoomed the entire editor out to fit. Nothing visible
       overflows this box (the pages are sized to it). */
    overflow: hidden;
}

/*
 * The source remains in the DOM for Livewire to update and for the script to
 * measure. Each visible page gets a scaled clone translated by one A4 height,
 * so the builder has distinct paper sheets instead of one endlessly growing
 * canvas.
 */
.resume-pagination-source {
    position: absolute;
    top: 0;
    left: 0;
    width: 210mm;
    visibility: hidden;
    pointer-events: none;
}

.resume-preview-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

.resume-preview-page {
    position: relative;
    flex: 0 0 auto;
    width: min(210mm, 100%);
    aspect-ratio: 210 / 297;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
}

.resume-preview-page-scale {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}

.resume-preview-page-content {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    box-shadow: none;
}

.resume-preview-page-mask {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    background: #fff;
    pointer-events: none;
}

/* Re-creates the article's own top/bottom padding on every page, not just
   the first - see paginate()'s comment on `translate` for why the clone's
   real padding only ever covered page 1. Height set per-page from JS
   (topPadding/bottomPadding, scaled to the displayed size). */
.resume-preview-page-mask-top {
    top: 0;
}

.resume-preview-page-mask-bottom {
    bottom: 0;
}

/* A safe break can end a page before its full content budget is used -
   `top` set from JS, stretched to the page's own bottom edge, covering
   whatever leftover content would otherwise peek through beneath the
   (shorter) visible band. */
.resume-preview-page-mask-gap {
    bottom: 0;
}

.resume-preview-page.is-modern .resume-preview-page-mask {
    left: 35%;
}

/* Keeps the sticky topbar from covering the top of a section scrolled into
   view via openSection()'s scrollToActiveSection() (Alpine, builder.blade.php). */
[data-resume-section] {
    scroll-margin-top: 90px;
}

/* Signals that clicking a section in the preview opens its editing tool
   (delegated click handler on .resume-preview-pages, builder.blade.php).
   Every template's sections nest inside one another (e.g. an experience
   entry inside the experience section), so the innermost tagged ancestor -
   the one :hover actually matches - is what a hovering pointer lands on. */
.resume-preview-pages [data-resume-section] {
    cursor: pointer;
}

/* Section highlight while its drawer is open - see data-resume-section on
   each template's section markup. Preview-only: never included in
   resume-pdf.css, since a downloaded PDF has no "currently editing" state.
   Deliberately no outline/border: an accent-colored frame around a chunk of
   the CV read as if it were part of the document's own design, not an
   editing cue - confirmed directly. A faint neutral wash (no line at all)
   reads as a highlight instead. */
.resume-canvas[data-active-section='personal'] [data-resume-section='personal'],
.resume-canvas[data-active-section='summary'] [data-resume-section='summary'],
.resume-canvas[data-active-section='experience'] [data-resume-section='experience'],
.resume-canvas[data-active-section='education'] [data-resume-section='education'],
.resume-canvas[data-active-section='skills'] [data-resume-section='skills'],
.resume-canvas[data-active-section='languages'] [data-resume-section='languages'],
.resume-canvas[data-active-section='projects'] [data-resume-section='projects'],
.resume-canvas[data-active-section='certifications'] [data-resume-section='certifications'],
.resume-canvas[data-active-section='interests'] [data-resume-section='interests'] {
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.045);
}

/*
 * Fixed to the viewport, not part of the scaled canvas's normal flow: at
 * zoom > 100% the page grows taller and pushes anything stacked below it
 * further down the document, which is exactly what made this control
 * disappear off-screen on zoom-in (confirmed directly). Pinning it to the
 * viewport's own bottom-right corner keeps it reachable at any zoom level.
 */
.resume-canvas-footer {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
    color: #6c757d;
    z-index: 25;
}

.resume-zoom-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid #e3e6ea;
    background: #fff;
    line-height: 1;
    flex-shrink: 0;
}

.resume-zoom-value {
    min-width: 2.5rem;
    text-align: center;
}

.resume-page-indicator {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid #e3e6ea;
}

/* ---------- Font / palette popovers (topbar) ---------- */

.resume-popover-wrapper {
    position: relative;
}

.resume-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 240px;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    padding: 0.65rem;
    z-index: 20;
}

/* Wider than the default popover: Barma's intro needs room to actually
   explain the benefit, not just label the panel. */
.resume-share-popover {
    width: 340px;
}

.resume-popover-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #adb5bd;
    padding: 0.25rem 0.35rem 0.5rem;
}

.resume-popover-hint {
    font-size: 0.7rem;
    color: #6c757d;
    margin: 0.5rem 0 0;
    padding: 0 0.35rem;
}

.resume-font-icon {
    font-weight: 700;
    font-size: 0.85rem;
}

/* 16 fonts: taller than a small laptop screen, so it scrolls instead of
 * running off the bottom of the viewport. */
.resume-font-popover {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.resume-font-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: 0.375rem;
    padding: 0.45rem 0.5rem;
    font-size: 0.85rem;
    text-align: left;
}

.resume-font-option:hover {
    background: #f8f9fa;
}

.resume-font-option.is-current {
    background: #eef3f8;
    font-weight: 600;
}

.resume-font-option-category {
    font-size: 0.68rem;
    color: #6c757d;
    flex-shrink: 0;
}

/* Standalone, always-visible topbar control (not inside a popover - a
   wire:click there previously reset the popover's Alpine state closed). */
.resume-stepper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.25rem 0.4rem;
    height: calc(1.5em + 0.5rem + 2px);
}

.resume-stepper button {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1px solid #e3e6ea;
    background: #fff;
    line-height: 1;
    flex-shrink: 0;
}

.resume-stepper span {
    min-width: 3.2rem;
    text-align: center;
    font-size: 0.78rem;
    color: #495057;
}

.resume-palette-trigger-dot {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    vertical-align: middle;
}

.resume-palette-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.resume-palette-swatch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid #e3e6ea;
    border-radius: 0.375rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    text-align: left;
}

.resume-palette-swatch:hover {
    background: #f8f9fa;
}

.resume-palette-swatch.is-current {
    border-color: #1d4ed8;
    background: #eef3f8;
    font-weight: 600;
}

.resume-palette-dot {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Horizon supplies a real four-colour system (primary, accent, surface and
   ink). Present it as one compact composition rather than four unrelated
   dots. Older templates deliberately keep their single accent dot. */
.resume-palette-composition {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, 1fr);
    width: 2.35rem;
    height: 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(33, 37, 41, 0.18);
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.resume-palette-chip {
    min-width: 0;
}

/* Pale surface chips remain legible against the white picker. */
.resume-palette-chip:nth-child(3) {
    box-shadow: inset 1px 0 0 rgba(33, 37, 41, 0.12), inset -1px 0 0 rgba(33, 37, 41, 0.12);
}

.resume-palette-trigger-composition {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.2rem;
}

/* ---------- Mobile: rail becomes a bottom bar, drawer becomes a sheet ---------- */

@media (max-width: 767.98px) {
    .resume-builder-shell {
        flex-direction: column;
        padding-bottom: 4.5rem;
    }

    .resume-rail {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        flex: none;
        flex-direction: row;
        width: 100%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-top: 1px solid #e3e6ea;
        z-index: 15;
    }

    .resume-rail-btn {
        flex: 0 0 auto;
        min-width: 4.25rem;
        border-left: none;
        border-top: 3px solid transparent;
    }

    .resume-rail-btn.is-active {
        border-left-color: transparent;
        border-top-color: #1d4ed8;
    }

    .resume-drawer {
        position: fixed;
        inset: 0;
        width: 100%;
        flex: none;
        height: 100dvh;
        z-index: 30;
    }

    .resume-canvas-area {
        /* The shell turns into a column here but keeps its desktop
           align-items: flex-start, so without this the preview area shrank
           to its content - previously the hidden 210mm pagination source,
           which is what widened the whole page and made the phone zoom out. */
        align-self: stretch;
        width: 100%;
        padding: 1.25rem 0.75rem;
    }

    /* Clears the bottom rail (padding-bottom: 4.5rem on .resume-builder-shell
       above reserves the same space) and drops the page-format detail so the
       pill stays compact on a narrow screen. */
    .resume-canvas-footer {
        right: 1rem;
        bottom: calc(4.5rem + 0.75rem);
    }

    .resume-page-indicator {
        display: none;
    }
}

/* ---------- AI text optimization (summary / experience descriptions) ---------- */

.resume-ai-loading {
    font-size: 0.8rem;
    color: #6c757d;
    margin-left: 0.5rem;
}

.resume-ai-suggestion {
    background: #f4f8ff;
    border: 1px solid #cfe0fb;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.resume-ai-suggestion-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.resume-ai-suggestion-text {
    font-size: 0.85rem;
    white-space: pre-wrap;
    margin-bottom: 0.75rem;
}

/* ---------- ATS readiness report ---------- */

.resume-ats-inline-error {
    font-size: 0.75rem;
    color: #b02a37;
    margin-top: 0.35rem;
    max-width: 220px;
}

.resume-ats-modal {
    max-width: 820px;
}

.resume-ats-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
}

.resume-ats-barma-intro {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    padding: 0.65rem 0.8rem 0.65rem 0.55rem;
    border: 1px solid #e0d5ff;
    border-radius: 0.7rem;
    background: linear-gradient(105deg, #faf8ff, #f2edff);
}

.resume-ats-barma-intro .resume-ai-avatar {
    width: 58px;
    height: 58px;
}

/* The topbar/inline version stays compact; the modal's own intro gets the
   larger persona + message the redesign asked for. */
.resume-ats-barma-intro-lg {
    padding: 1rem 1.2rem;
    gap: 1.1rem;
}

.resume-ats-barma-intro-lg .resume-ai-avatar {
    width: 92px;
    height: 92px;
}

.resume-ats-barma-intro-lg span {
    font-size: 0.75rem;
}

.resume-ats-barma-intro-lg p {
    font-size: 0.95rem;
}

.resume-ats-barma-intro span,
.resume-ats-priorities-label {
    display: block;
    color: #6425e8;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.resume-ats-barma-intro p {
    margin: 0.16rem 0 0;
    color: #514866;
    font-size: 0.82rem;
    line-height: 1.4;
}

.resume-ats-priorities-label {
    margin: 0.15rem 0 0.55rem;
}

/* Two columns below the Barma intro: the score/verdict on the left stays in
   view while the (potentially long) recommendation list scrolls on the
   right, independently of the modal's own overflow. */
.resume-ats-columns {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: 1.75rem;
    align-items: start;
}

.resume-ats-column-score {
    display: flex;
    flex-direction: column;
}

.resume-ats-column-issues {
    max-height: 22rem;
    overflow-y: auto;
    padding-right: 0.35rem;
}

@media (max-width: 640px) {
    .resume-ats-columns {
        grid-template-columns: 1fr;
    }

    .resume-ats-column-issues {
        max-height: none;
    }
}

.resume-ats-score {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 700;
    color: #1d4ed8;
    margin-bottom: 0.5rem;
}

.resume-ats-score-value {
    font-size: 2.25rem;
    line-height: 1;
}

.resume-ats-score-max {
    font-size: 1rem;
    color: #adb5bd;
}

.resume-ats-summary {
    color: #495057;
    margin-bottom: 1rem;
}

.resume-ats-checked-at {
    margin: 0.6rem 0 0;
    color: #8c8599;
    font-size: 0.72rem;
}

/* Last known score, shown on the topbar button itself once a report exists
   - so the tokens spent on it stay visibly worth something even before the
   modal is reopened. */
.resume-ats-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #eae2ff;
    color: #5a21c9;
    font-size: 0.7rem;
    font-weight: 800;
}

.resume-ats-issues {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resume-ats-issue {
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.4rem;
    border-left: 3px solid #ced4da;
    background: #f8f9fa;
}

.resume-ats-issue-high {
    border-left-color: #dc3545;
    background: #fdf2f3;
}

.resume-ats-issue-medium {
    border-left-color: #fd7e14;
    background: #fef6ee;
}

.resume-ats-issue-low {
    border-left-color: #6c757d;
}

.resume-ats-callout {
    background: #fff8e6;
    border: 1px solid #ffe8a3;
    border-radius: 0.4rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
    color: #7a5c00;
}

/* ---------- AI skill suggestions ---------- */

.resume-skill-suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f4f8ff;
    border: 1px solid #cfe0fb;
    border-radius: 999px;
    padding: 0.3rem 0.4rem 0.3rem 0.75rem;
    font-size: 0.8rem;
    color: #1d3a63;
}

.resume-skill-suggestion-add,
.resume-skill-suggestion-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #1d4ed8;
    padding: 0;
    font-size: 0.7rem;
}

.resume-skill-suggestion-add:hover {
    background: #1d4ed8;
    color: #fff;
}

.resume-skill-suggestion-dismiss {
    color: #6c757d;
}

.resume-skill-suggestion-dismiss:hover {
    background: #e9ecef;
}

/* ==========================================================================
   BestCV workspace refresh
   A compact, purple-forward editor shell inspired by contemporary document
   builders. These rules deliberately live after the base stylesheet so the
   editor's proven pagination and Livewire behaviour stay untouched.
   ========================================================================== */

:root {
    --resume-brand: #6425e8;
    --resume-brand-dark: #461082;
    --resume-brand-soft: #f3efff;
    --resume-ink: #17132b;
    --resume-muted: #77728c;
    --resume-line: #e9e6f1;
    --resume-topbar-height: 116px;
}

.resume-builder-body {
    background: #f6f4fb;
    color: var(--resume-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.resume-builder-topbar-group {
    min-height: var(--resume-topbar-height);
}

.resume-builder-header,
.resume-builder-subheader {
    padding: 0.55rem 1.15rem;
    background: rgba(255, 255, 255, 0.97);
    border-bottom-color: var(--resume-line);
}

.resume-builder-header {
    box-shadow: 0 1px 0 rgba(70, 16, 130, 0.025);
}

.resume-header-start,
.resume-header-end,
.resume-builder-subheader,
.resume-subheader-tools {
    min-width: 0;
}

.resume-subheader-tools {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.resume-topbar-separator {
    align-self: stretch;
    width: 1px;
    margin: 0.15rem 0.2rem;
    background: var(--resume-line);
}

.resume-platform-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    color: var(--resume-brand-dark);
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.resume-platform-brand img {
    width: 1.9rem;
    height: 1.9rem;
}

.resume-platform-brand strong {
    font-weight: 800;
}

.resume-platform-brand em {
    color: #ff5600;
    font-style: normal;
    font-weight: 800;
}

.resume-builder-subheader .resume-title-group {
    gap: 0.05rem;
}

.resume-title-caption {
    color: #a39cb8;
    font-weight: 700;
}

.resume-builder-subheader .resume-title-input {
    color: var(--resume-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    padding: 0.1rem 0.25rem;
}

.resume-topbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 2.25rem;
    border-radius: 0.48rem;
    font-size: 0.77rem;
    font-weight: 650;
    white-space: nowrap;
}

.resume-builder-body .btn-outline-secondary {
    border-color: #dfdbea;
    color: #45405a;
    background: #fff;
    padding: 0.2rem;
    font-size: 0.8rem;
}

.resume-builder-body .btn-outline-secondary:hover,
.resume-builder-body .btn-outline-secondary:focus {
    background: #f7f5fb;
    border-color: #bdb3d6;
    color: var(--resume-brand-dark);
}

.resume-builder-body .btn-primary {
    border-color: var(--resume-brand);
    background: linear-gradient(135deg, #7135ec, #5720d6);
    box-shadow: 0 0.25rem 0.65rem rgba(100, 37, 232, 0.2);
}

.resume-builder-body .btn-primary:hover,
.resume-builder-body .btn-primary:focus {
    border-color: var(--resume-brand-dark);
    background: #4f1ac8;
}

.resume-builder-body .btn-outline-primary {
    border-color: #cfc1fa;
    color: #5a22cf;
    background: #fbfaff;
}

.resume-builder-body .btn-outline-primary:hover,
.resume-builder-body .btn-outline-primary:focus {
    border-color: var(--resume-brand);
    color: #fff;
    background: var(--resume-brand);
}

.resume-token-balance {
    background: #fff7dc;
    border: 1px solid #f6e7b3;
    color: #80600a;
}

.resume-save-status-pill {
    min-width: auto;
    padding: 0.3rem 0.6rem;
    background: #f5f2fb;
    color: #716a83;
}

.resume-save-status-pill .bi-check-circle-fill,
.resume-save-status-pill .bi-cloud-check {
    color: #18a76f;
}

.resume-download-button {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.resume-download-caret {
    font-size: 0.7rem;
}

.resume-download-popover {
    width: 260px;
    padding: 0.35rem;
}

.resume-download-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.375rem;
    color: inherit;
    text-decoration: none;
}

.resume-download-option:hover,
.resume-download-option:focus-visible {
    background: #f8f9fa;
    color: inherit;
}

.resume-download-option > i {
    font-size: 1.25rem;
}

.resume-download-option .bi-file-earmark-pdf {
    color: #c0392b;
}

.resume-download-option .bi-file-earmark-word {
    color: #2b579a;
}

.resume-download-option strong,
.resume-download-option small {
    display: block;
}

.resume-download-option strong {
    font-size: 0.85rem;
}

.resume-download-option small {
    font-size: 0.72rem;
    color: #6c757d;
}

.resume-stepper {
    height: 2.25rem;
    border-color: #dfdbea;
    border-radius: 0.48rem;
}

.resume-stepper button {
    border-color: #e7e2f1;
    color: var(--resume-brand-dark);
}

.resume-stepper span {
    color: #4c4660;
}

.resume-builder-shell {
    min-height: calc(100vh - var(--resume-topbar-height));
}

.resume-rail {
    flex-basis: 104px;
    padding: 0.8rem 0.5rem;
    border-right-color: var(--resume-line);
    top: var(--resume-topbar-height);
    height: calc(100vh - var(--resume-topbar-height));
    background: #fff;
}

.resume-rail-btn {
    gap: 0.32rem;
    margin-bottom: 0.12rem;
    border-left-width: 3px;
    border-radius: 0.5rem;
    padding: 0.55rem 0.22rem;
    color: #605a71;
    font-size: 0.68rem;
    font-weight: 550;
}

.resume-rail-btn i {
    color: #3e3752;
    font-size: 1.15rem;
}

.resume-rail-btn:hover {
    color: var(--resume-brand);
    background: #faf8ff;
}

.resume-rail-btn.is-active {
    border-left-color: var(--resume-brand);
    background: var(--resume-brand-soft);
    color: var(--resume-brand);
}

.resume-rail-btn.is-active i {
    color: var(--resume-brand);
}

.resume-drawer {
    flex-basis: 390px;
    width: 390px;
    border-right-color: var(--resume-line);
    top: var(--resume-topbar-height);
    height: calc(100vh - var(--resume-topbar-height));
    background: #fcfbff;
    box-shadow: 0.65rem 0 1.25rem rgba(50, 36, 85, 0.035);
}

.resume-drawer-header {
    align-items: center;
    padding: 1rem 1.2rem 0.9rem;
    border-bottom-color: var(--resume-line);
    background: #fff;
}

.resume-drawer-step {
    color: #8b7bc0;
    font-weight: 700;
}

.resume-drawer-title {
    color: var(--resume-ink);
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -0.035em;
}

.resume-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #e8e3f0;
    border-radius: 0.45rem;
    color: #716a83;
}

.resume-drawer-close:hover {
    color: var(--resume-brand-dark);
    background: var(--resume-brand-soft);
}

.resume-drawer-body {
    padding: 0.7rem 0.8rem;
    font-size: 0.84rem;
}

.resume-drawer-body .resume-editor-section {
    margin-bottom: 0;
    padding: 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.resume-drawer-body h2.h5 {
    color: var(--resume-ink);
    font-size: 0.94rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.resume-drawer-body .form-label {
    color: #746c87;
    font-size: 0.72rem;
    font-weight: 650;
    margin-bottom: 0.12rem;
}

.resume-drawer-body .form-label.resume-field-label-has-value {
    display: none;
}

.resume-drawer-body .form-control,
.resume-drawer-body .form-select {
    min-height: 2rem;
    border-color: #e1ddea;
    border-radius: 0.45rem;
    background-color: #fff;
    color: #262139;
    box-shadow: none;
    font-size: 0.82rem;
    line-height: 1.25;
    padding: 0.3rem 0.55rem;
    font-size: 0.70rem;
}

.resume-drawer-body .form-control:focus,
.resume-drawer-body .form-select:focus {
    border-color: #a98aec;
    box-shadow: 0 0 0 0.18rem rgba(100, 37, 232, 0.11);
}

.resume-drawer-body textarea.form-control {
    min-height: 5rem;
    height: 5rem;
    line-height: 1.35;
}

.resume-drawer-body .row.g-3 {
    --bs-gutter-x: 0.55rem;
    --bs-gutter-y: 0.45rem;
}

.resume-experience-card {
    border-color: #e7e3ef;
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 0.25rem 0.75rem rgba(40, 25, 75, 0.025);
}

.resume-experience-card-label {
    color: #76639f;
}

.resume-drawer-body .resume-experience-card {
    padding: 0.65rem;
    margin-bottom: 0.6rem;
}

.resume-skill-row {
    border-bottom-color: #ebe7f2;
}

/* Skills stay scannable in the narrow editor drawer: name, proficiency and
   row actions are deliberately three stable columns rather than wrapping
   into three separate lines. Languages and interests retain their simpler
   existing row treatment. */
.resume-drawer-body .resume-skill-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(6.25rem, 0.8fr) auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0;
}

.resume-drawer-body .resume-skill-grid .form-control,
.resume-drawer-body .resume-skill-grid .form-select {
    width: 100%;
}

.resume-drawer-body .resume-skill-grid .resume-skill-level-select {
    max-width: none;
}

.resume-drawer-body .resume-skill-grid .btn-group {
    justify-self: end;
    flex-wrap: nowrap;
}

.resume-canvas-area {
    padding: 1.5rem;
    background-color: #f5f2fa;
    background-image: radial-gradient(circle, #d8d0e6 1px, transparent 1.1px);
    background-size: 18px 18px;
}

.resume-preview-pages {
    gap: 1rem;
}

.resume-preview-page {
    border-radius: 0.15rem;
    box-shadow: 0 0.75rem 2rem rgba(44, 29, 79, 0.14);
}

.resume-canvas-footer {
    right: 1.25rem;
    bottom: 1.25rem;
    border-color: #e2dced;
    border-radius: 0.6rem;
    box-shadow: 0 0.35rem 1.2rem rgba(50, 34, 90, 0.12);
}

.resume-zoom-btn {
    border-color: #e5def0;
    color: var(--resume-brand-dark);
}

/* The transparent 4 × 2 Barma sprite gives each IA context its matching
   pose without asking the browser to load eight copies. */
.resume-ai-avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    flex: 0 0 auto;
    background-image: url('/assets/resume/bestcv-ai-assistant-poses.webp');
    background-repeat: no-repeat;
    background-size: 400% 200%;
    background-position: 0 0;
}

.resume-ai-avatar--ats {
    background-position: 33.333% 0;
}

.resume-ai-avatar--resume-optimization {
    background-position: 66.667% 0;
}

.resume-ai-avatar--job-match {
    background-position: 100% 0;
}

.resume-ai-avatar--cover-letter {
    background-position: 0 100%;
}

.resume-ai-avatar--description {
    background-position: 33.333% 100%;
}

.resume-ai-avatar--success {
    background-position: 66.667% 100%;
}

.resume-ai-avatar--alert {
    background-position: 100% 100%;
}

.resume-ai-guide {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 5.2rem;
    padding: 0.45rem 0.65rem 0.45rem 0.45rem;
    overflow: hidden;
    border: 1px solid #e0d5ff;
    border-radius: 0.7rem;
    background: linear-gradient(105deg, #f8f5ff, #f0eaff);
}

.resume-ai-guide .resume-ai-avatar {
    width: 64px;
    height: 64px;
}

.resume-ai-guide-eyebrow {
    display: block;
    margin-bottom: 0.12rem;
    color: #6a2de0;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.resume-ai-guide p {
    margin: 0;
    color: #554c69;
    font-size: 0.73rem;
    line-height: 1.35;
}

.resume-ai-guide p strong {
    color: #4c1baf;
}

.resume-ai-dialog-intro {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem 0.6rem 0.55rem;
    border: 1px solid #e1d5ff;
    border-radius: 0.65rem;
    background: #f8f5ff;
}

.resume-ai-dialog-intro .resume-ai-avatar {
    width: 44px;
    height: 44px;
}

.resume-ai-dialog-intro p {
    margin: 0;
    color: #514866;
    font-size: 0.8rem;
    line-height: 1.4;
}

.resume-ai-action {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.resume-ai-action .resume-ai-avatar,
.resume-topbar-ai-action .resume-ai-avatar {
    width: 22px;
    height: 22px;
}

.resume-ai-suggestion {
    border-color: #dcd0ff;
    background: #f8f5ff;
}

.resume-ai-suggestion-label {
    color: #6528dc;
}

.resume-skill-suggestion-chip {
    border-color: #ddd1ff;
    background: #f8f5ff;
    color: #4f247f;
}

.resume-skill-suggestion-add {
    color: #6528dc;
}

.resume-skill-suggestion-add:hover {
    background: #6528dc;
}

@media (max-width: 1280px) {
    .resume-save-status-pill {
        display: none;
    }

    .resume-drawer {
        flex-basis: 360px;
        width: 360px;
    }
}

@media (max-width: 1024px) {
    .resume-subheader-tools,
    .resume-header-end {
        gap: 0.35rem !important;
    }

    .resume-topbar-label {
        display: none;
    }

    .resume-topbar-action-content {
        display: inline-flex;
        align-items: center;
        gap: 0.38rem;
    }
}

@media (max-width: 767.98px) {
    /* Both rows wrap onto several lines at this width, so the two-row
       group is taller than the desktop measurement baked into the
       default --resume-topbar-height - keep the sidebar/drawer/shell
       (all offset from that var) from sliding under the wrapped rows. */
    :root {
        --resume-topbar-height: 230px;
    }

    .resume-builder-header,
    .resume-builder-subheader {
        align-items: flex-start !important;
        padding: 0.55rem 0.7rem;
    }

    .resume-header-start,
    .resume-header-end {
        width: 100%;
    }

    .resume-platform-brand span,
    .resume-header-start>.resume-topbar-button span,
    .resume-title-caption {
        display: none;
    }

    .resume-builder-subheader .resume-title-input {
        max-width: 11rem;
    }

    /* Topbar popovers (font, palette, download) open as full-width sheets
       just under their button: anchored to the button's right edge at a
       fixed 240px, the font list ran off the left of the screen when "Aa"
       sat near it. `top: auto` keeps each at its natural place below the
       button; only the horizontal box is pinned to the viewport. */
    .resume-popover {
        position: fixed;
        top: auto;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* The rail sits at the bottom and the drawer is full-screen here, so
       nothing hangs off the topbar's height: it keeps its natural height
       instead of the reserved --resume-topbar-height (an empty band). */
    .resume-builder-topbar-group {
        min-height: 0;
    }

    /* The redesign rules above re-set the rail's and drawer's desktop
       geometry (top offset, full height, fixed widths) after the first
       mobile block, silently cancelling it: the rail stood full-height on the
       right and the drawer started halfway down. Restated here, last. */
    .resume-rail {
        top: auto;
        height: auto;
        padding: 0.25rem 0.35rem;
        border-top-color: var(--resume-line);
        background: rgba(255, 255, 255, 0.98);
    }

    .resume-rail-btn {
        margin-bottom: 0;
        border-left: none;
        border-top: 3px solid transparent;
        padding: 0.45rem 0.3rem;
    }

    .resume-rail-btn.is-active {
        border-top-color: var(--resume-brand);
    }

    .resume-drawer {
        top: 0;
        width: 100%;
        height: 100dvh;
        background: #fcfbff;
    }

    .resume-canvas-area {
        padding: 1rem 0.6rem;
    }

    .resume-canvas-footer {
        right: 0.8rem;
        bottom: calc(4.5rem + 0.75rem);
    }
}

/* "Ajouter ..." button placed below each section's list, so the next item
   can be added without scrolling back up. */
.resume-builder-body .resume-add-item-btn {
    margin-top: 0.75rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    border-style: dashed;
}

/* Launch phase (see App\Resume\Support\LaunchMode): a one-line strip under the
   sticky top bar, and Barma's panel when the day's tokens are used up. The
   panel reuses .resume-unlock-banner, so only what differs is defined here. */
.resume-launch-strip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(105deg, #faf8ff, #f2edff);
    border-bottom: 1px solid #e0d5ff;
    color: #4a3a8c;
    font-size: 0.82rem;
    line-height: 1.35;
}

.resume-launch-strip .bi-gift {
    flex-shrink: 0;
    color: #7c5cff;
}

.resume-launch-strip span {
    flex: 1 1 auto;
    min-width: 0;
}

.resume-launch-strip-close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #7c6fb3;
    padding: 0.2rem 0.35rem;
    line-height: 1;
    border-radius: 0.35rem;
}

.resume-launch-strip-close:hover,
.resume-launch-strip-close:focus-visible {
    background: rgba(124, 92, 255, 0.12);
    color: #4a3a8c;
}

.resume-token-balance-level {
    font-weight: 500;
    opacity: 0.7;
}

/* Beats ".resume-unlock-banner-body span" (small uppercase label) for the
   text of the opt-in checkbox. */
.resume-unlock-banner-body .resume-token-panel-optin {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.65rem;
    font-size: 0.82rem;
    color: #33314a;
    cursor: pointer;
}

.resume-token-panel-optin input {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.resume-token-panel-optin em {
    font-style: normal;
}