/*
 * 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;
}

/* Session notice (see x-resume.session-keeper): stays until acted on,
   unlike a toast. */
.resume-session-notice {
    position: fixed;
    top: 1rem;
    left: 50%;
    z-index: 1200;
    width: calc(100% - 2rem);
    max-width: 520px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgba(20, 20, 30, 0.2);
    font-size: 0.9rem;
}

.resume-session-notice[hidden] {
    display: none;
}

.resume-session-notice span {
    flex: 1;
}

.resume-session-notice .btn {
    flex-shrink: 0;
}

.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;
}

/* 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));
    /* Not the default `auto`: a card clips its overflow, so its minimum
       height counts as zero and auto rows were squeezed to fit the dialog
       once there were more templates than it could show - cutting off the
       names instead of scrolling. */
    grid-auto-rows: max-content;
    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;
}

/* ---------- Section order panel ---------- */

.resume-order-hint,
.resume-order-fixed {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.resume-order-fixed {
    margin: 0.6rem 0 0;
}

.resume-order-zone-title {
    margin: 1rem 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #495057;
}

.resume-order-zone-title-first {
    margin-top: 0.25rem;
}

.resume-order-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A header line takes two rows: its label and arrows, then its tools. */
.resume-order-identity-item {
    flex-wrap: wrap;
}

.resume-order-identity-tools {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1.45rem;
}

.resume-order-size {
    flex: 0 0 auto;
}

/* B, I and AA, drawn as what they do. */
.resume-order-emphasis {
    min-width: 2rem;
    font-family: Georgia, 'Times New Roman', serif;
}

.resume-order-emphasis-bold {
    font-weight: 700;
}

.resume-order-emphasis-italic {
    font-style: italic;
}

.resume-order-emphasis-uppercase {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.resume-order-size span {
    min-width: 3.2em;
    text-align: center;
}

.resume-order-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #e3e6ea;
    border-radius: 0.4rem;
    background: #fff;
    cursor: grab;
}

.resume-order-item.is-dragging {
    opacity: 0.45;
}

/* Where the dragged section will land. */
.resume-order-item.is-over {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
}

.resume-order-grip {
    color: #adb5bd;
}

.resume-order-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
}

.resume-order-label small {
    display: block;
    font-size: 0.72rem;
    color: #868e96;
}

.resume-order-item.is-empty .resume-order-label {
    color: #868e96;
}

/* No hover to grab with on a touch screen: the arrows are the control, and
   every button is given the size of a fingertip (they measured 21 to 32px). */
@media (hover: none) {
    .resume-order-item {
        padding: 0.5rem 0.6rem;
        cursor: default;
    }

    .resume-order-grip {
        display: none;
    }

    /* In every section's panel, not only this one: the same small arrows
       (and the delete button beside them) move and remove an experience, a
       skill, a language... */
    .resume-editor-section .btn-group-sm > .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    /* The two "give it back to the template" buttons. */
    .resume-order > .btn {
        min-height: 2.75rem;
    }

    .resume-order-identity-tools {
        gap: 0.75rem;
        padding-left: 0;
    }

    /* Named twice over: .resume-stepper's own sizes come later in this file. */
    .resume-order .resume-order-size {
        height: auto;
        padding: 0.3rem 0.4rem;
    }

    .resume-order .resume-order-size button {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.1rem;
    }
}

.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;
    /* A ligature is one glyph, and some PDF text extractors give it back as
       one character: "fidélisation" is then not found by a keyword search
       for "fidélisation". Set here rather than for print only, so the
       preview breaks its lines where the export does. */
    font-variant-ligatures: none;
}

/* The header's name and job title, set in bold, italic or capitals - or
   cleared of it - by the CV's owner (ResumeIdentityLayout). An attribute is only there
   for a choice that differs from the template's, and it wins over whatever
   the template styles the line and its parts with (Prisme sets the first
   and the last name in two spans of their own). */
[data-identity-bold="1"],
[data-identity-bold="1"] * {
    font-weight: 700 !important;
}

[data-identity-bold="0"],
[data-identity-bold="0"] * {
    font-weight: 400 !important;
}

[data-identity-italic="1"],
[data-identity-italic="1"] * {
    font-style: italic !important;
}

[data-identity-italic="0"],
[data-identity-italic="0"] * {
    font-style: normal !important;
}

[data-identity-uppercase="1"],
[data-identity-uppercase="1"] * {
    text-transform: uppercase !important;
}

[data-identity-uppercase="0"],
[data-identity-uppercase="0"] * {
    text-transform: none !important;
}

.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;
    /* ATS cap - see ResumeAtsTrackingTest. */
    letter-spacing: 0.06em;
    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;
    /* ATS cap - see ResumeAtsTrackingTest. */
    letter-spacing: 0.06em;
    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 reshapes the same Alpine
   state into a bottom bar and sheet.
   ========================================================================== */

.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;
    /* Anchors .resume-template-loading. */
    position: relative;
}

/* Veil over the preview while a newly picked template loads. Below the
   sticky header (stack level 10), above the pages. */
.resume-template-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    justify-content: center;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.78);
}

.resume-template-loading-box {
    position: sticky;
    top: 35vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 6rem 0;
    color: #24396f;
    font-size: 0.95rem;
    font-weight: 600;
}

.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, and the
   (potentially long) recommendation list on the right, as tall as the left
   column and scrolling inside it. */
.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 {
    /* As tall as the score column and no taller: its own content is left out
       of the row's height (contain: size), so the row is as high as the left
       column, and a longer list scrolls inside it. The floor keeps it usable
       when the left column is short. */
    align-self: stretch;
    contain: size;
    min-height: 14rem;
    overflow-y: auto;
    padding-right: 0.35rem;
}

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

    .resume-ats-column-issues {
        contain: none;
        min-height: 0;
    }
}

.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-group + .resume-ats-group {
    margin-top: 1.1rem;
}

.resume-ats-group-hint {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0 0 0.5rem;
}

.resume-recap-modal {
    max-width: 640px;
}

.resume-recap-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.resume-recap-question {
    display: block;
    color: #6c757d;
}

.resume-ats-question {
    display: block;
    font-weight: 600;
    margin: 0.5rem 0 0.3rem;
}

.resume-ats-breakdown {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.8rem;
}

.resume-ats-breakdown li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.5rem;
}

.resume-ats-breakdown-score {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.resume-ats-breakdown-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: #e9ecef;
    overflow: hidden;
}

.resume-ats-breakdown-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.55;
}

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

.resume-ats-callout-link {
    display: block;
    margin-top: 0.35rem;
    color: inherit;
    font-weight: 600;
}

/* The same link, when it acts on the page instead of leading elsewhere. */
.resume-ats-callout-button {
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    text-decoration: underline;
}

/* ---------- 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;
}

/* On a touch screen the row's buttons are the size of a fingertip
   (see the section order panel), and three of them leave a skill's name some
   ten characters: the name takes a line of its own, the level and the
   buttons the next. Same for a language, which had come to three lines. */
@media (hover: none) {
    .resume-drawer-body .resume-skill-grid {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .resume-drawer-body .resume-skill-grid > .form-control {
        grid-column: 1 / -1;
    }

    .resume-drawer-body .resume-skill-row:not(.resume-skill-grid) > .form-control {
        flex: 1 0 100%;
    }

    .resume-drawer-body .resume-skill-row:not(.resume-skill-grid) > .resume-skill-level-select {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    /* An interest has no level: its name shares the line with the buttons. */
    .resume-drawer-body .resume-skill-row:not(.resume-skill-grid) > .form-control:nth-last-child(2) {
        flex: 1 1 0;
        min-width: 0;
    }
}

.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;
}

/* Drawer open/close animation (Alpine x-transition classes). A fade here;
   the mobile block below turns it into a slide-up, the drawer being a
   bottom sheet there. The backdrop and the close label are phone-only. */
.resume-drawer-transition {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.resume-drawer-hidden {
    opacity: 0;
    transform: scale(0.95);
}

.resume-drawer-backdrop,
.resume-drawer-close-label {
    display: none;
}

@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 topbar wraps naturally on phones; a fixed desktop minimum would
       leave an empty band between it and the CV. */
    .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);
    }

    /* Keep the main navigation row visible; the sheet covers the lower row
       of editing tools to give the form more height. Alpine measures it. */
    .resume-drawer {
        top: calc(var(--resume-sheet-top, 4.5rem) + 0.25rem);
        bottom: 0;
        width: 100%;
        height: auto;
        padding-bottom: 4.5rem;
        border-right: 0;
        border-radius: 1rem 1rem 0 0;
        background: #fcfbff;
        overflow: hidden;
    }

    .resume-drawer-body {
        min-height: 0;
    }

    .resume-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 29;
        background: rgba(24, 18, 43, 0.45);
    }

    /* Above the sheet: switching section (or tapping the active one to
       close) must stay possible while it is open. */
    .resume-rail {
        z-index: 31;
    }

    .resume-drawer-transition {
        transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .resume-drawer-hidden {
        opacity: 1;
        transform: translateY(100%);
    }

    .resume-drawer-close {
        width: auto;
        gap: 0.4rem;
        padding: 0 0.7rem;
    }

    .resume-drawer-close-label {
        display: inline;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .resume-drawer-body {
        /* Reaching the end of the form must not start scrolling the CV
           hidden behind the sheet. */
        overscroll-behavior: contain;
    }

    /* Below 16px, iOS Safari zooms the whole page in when a field takes
       focus and leaves it zoomed afterwards. */
    .resume-drawer-body .form-control,
    .resume-drawer-body .form-select {
        font-size: 1rem;
    }

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

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

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

/* "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;
}

/* Commands for phones only. Desktop keeps the original toolbar. */
.resume-mobile-header,
.resume-mobile-panel-backdrop {
    display: none;
}

.resume-preview-viewport {
    display: contents;
}

/* Reports were inside the desktop sticky header (stack level 10). Preserve
   that layering after teleporting them so mobile can hide the toolbar. */
.resume-report-backdrop {
    z-index: 10;
}

/* First-visit guided tour (x-resume.builder-tour). The root blocks the page
   underneath; the dimming is the spotlight's own outsized shadow, so the
   highlighted area stays undimmed without any masking. Above every other
   layer of the builder (floating notices sit at 1000, toasts at 1100). */
.resume-tour {
    position: fixed;
    inset: 0;
    z-index: 1200;
    overflow: hidden;
}

.resume-tour-spotlight {
    position: absolute;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 200vmax rgba(23, 19, 43, 0.58);
    outline: 2px solid var(--resume-brand);
    outline-offset: 0;
    pointer-events: none;
}

.resume-tour-card {
    position: absolute;
    width: min(340px, calc(100vw - 24px));
    padding: 1rem 1.1rem;
    background: #fff;
    border-radius: 0.9rem;
    box-shadow: 0 1rem 3rem rgba(20, 20, 30, 0.28);
    color: var(--resume-ink);
}

.resume-tour.is-animated .resume-tour-spotlight {
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.resume-tour.is-animated .resume-tour-card {
    transition: top 0.25s ease, left 0.25s ease;
}

.resume-tour-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.resume-tour-card-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.resume-tour-card-head .resume-ai-avatar {
    width: 46px;
    height: 46px;
}

.resume-tour-step {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--resume-brand);
}

.resume-tour-card h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.resume-tour-card p {
    margin: 0 0 0.9rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #33314a;
}

.resume-tour-close {
    align-self: flex-start;
}

.resume-tour-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resume-tour-actions-spacer {
    flex: 1 1 auto;
}

.resume-tour-skip {
    padding-left: 0;
    color: var(--resume-muted);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .resume-tour.is-animated .resume-tour-spotlight,
    .resume-tour.is-animated .resume-tour-card {
        transition: none;
    }
}

/* Pricing grid: an offer's buy button inside a notice or a popover (see
   partials/offer-cta), and the posting a job application was started on. */
.resume-offer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin: 0;
}

.resume-offer-cta-link {
    font-size: 0.8rem;
}

a.resume-token-balance {
    text-decoration: none;
}

.resume-application-posting {
    padding: 0.6rem 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.85rem;
}

.resume-application-posting summary {
    cursor: pointer;
    overflow-wrap: anywhere;
}

.resume-application-posting p {
    max-height: 14rem;
    margin: 0.6rem 0 0;
    overflow-y: auto;
    color: #4b5563;
    overflow-wrap: anywhere;
}