/* Trajectory Template — skills-first functional layout for career changers */

/* ---- page margins (multi-page) ---------------------------------------- *
 * PdfService gives mPDF margin_* = 0, so a PDF's only vertical margin is
 * this wrapper's own padding — and a wrapper's padding-top lands on page 1
 * alone, leaving every later page hard against the sheet edge.
 *
 * @page restores an identical margin on every page; `@page :first` zeroes
 * the top one so page 1 keeps using the wrapper padding it always had and
 * its output is unchanged. Left/right stay 0 — the wrapper's horizontal
 * padding already applies to every page. Inert in the browser (@page is
 * print-only), and builder.js reads these same values back out of CSSOM
 * so its page-count model matches what mPDF actually does. */
@page {
    margin: 40px 0 40px 0;
}
@page :first {
    margin-top: 0;
}

.resume-page {
    width: 794px;              /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    /* Bottom padding is 0 on purpose (the pulse/sapphire rule): wrapper bottom
       padding is real trailing space in the flow, so content ending near the
       boundary makes mPDF open a further page and paint nothing on it —
       measured here as a blank page 2 on the FR sample the moment the
       @media print block below stopped cancelling this padding. The bottom gap
       on every page comes from @page's margin-bottom (40px, above) instead,
       which does not add to the flow. */
    padding: 40px 40px 0;
    background: #ffffff;
    color: #1f2937;
    font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    line-height: 1.5;
}

/* mPDF does NOT inherit font-family/size into table cells — anything inside
   a <td> silently falls back to the serif document default (in-td trap class,
   2026-07 slate rework). This template's row/column/band layout uses tables,
   so the font must be declared at td level too. No-op in the browser. */
.resume-trajectory td {
    font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #1f2937;
}


/* ===== HEADER ===== */
.resume-trajectory .cv-header {
    margin-bottom: 1.5rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.75rem;
}

.resume-trajectory .cv-name {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.resume-trajectory .cv-jobtitle {
    font-size: 13px;
    font-weight: bold;
    color: #374151;
    margin-bottom: 0.5rem;
}

.resume-trajectory .cv-contact {
    font-size: 10px;
    color: #6b7280;
    word-break: break-word;
}

/* Separator glyphs would need CSS `content:`, which never renders in mPDF —
   edit mode uses margin gaps only (classic.php convention); the pdf branch
   already glues fields with a literal &middot;. */
.resume-trajectory .cv-contact span {
    display: inline;
    margin-right: 0.5rem;
}

/* ===== SECTIONS ===== */
.resume-trajectory .cv-section {
    margin-bottom: 1.25rem;
    clear: both;
}

.resume-trajectory .cv-section-title {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1f2937;
    margin: 0 0 0.75rem 0;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 0.4rem;
    page-break-after: avoid;
}
/* page-break-after:avoid on the title alone is not reliable in mPDF — a
 * header can still land as the last line on a page with its first entry
 * pushed to the next one. Wrapping the title together with its first entry
 * in a page-break-inside:avoid group moves the pair to the next page as a
 * unit. */
.resume-trajectory .cv-section-head-group {
    page-break-inside: avoid;
}

/* ===== SKILLS GRID ===== */
.resume-trajectory .cv-skills-grid {
    width: 100%;
    margin-bottom: 0.5rem;
}

.resume-trajectory .cv-skill-cell {
    float: left;
    width: 31.5%;
    margin-right: 2.5%;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    padding: 10px;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    background: #fafafa;
    box-sizing: border-box;
}

.resume-trajectory .cv-skill-cell:nth-child(3n) {
    margin-right: 0;
}

.resume-trajectory .cv-skills-grid::after {
    content: '';
    display: table;
    clear: both;
}

/* pdf-mode equivalent of the float grid above. mPDF does not pack repeated
   same-direction floats into rows (skill §5) — it rendered 2 cells per row
   against the browser's 3 — so the export builds a real 3-column table
   instead. Styling mirrors .cv-skill-cell so the two renderers match; the
   border/padding live on the <td> because mPDF drops a block div's border and
   padding inside a cell. `border-spacing` (not margin) is the gap primitive
   here: cell margins do not exist in table layout. */
.resume-trajectory .cv-skills-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px 8px;
    margin: 0 -8px 0.5rem;
}
.resume-trajectory .cv-skill-td {
    width: 33.33%;
    border: 1px solid #e5e7eb;
    padding: 10px;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
    background: #fafafa;
    box-sizing: border-box;
}
/* Trailing cells that pad the last row out to 3 carry no frame. */
.resume-trajectory .cv-skill-td.cv-skill-td--empty {
    border: 0;
    background: transparent;
}

.resume-trajectory .cv-skill-name {
    font-weight: bold;
    display: block;
    word-break: break-word;
    padding-right: 20px;
}

.resume-trajectory .cv-skill-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    font-size: 14px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.resume-trajectory .cv-skill-remove:hover {
    color: #ef4444;
}

/* ===== SUMMARY ===== */
.resume-trajectory .cv-summary {
    font-size: 11px;
    line-height: 1.5;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* ===== EXPERIENCE (COMPRESSED) ===== */
.resume-trajectory .cv-item--compressed {
    margin-bottom: 0.75rem;
    page-break-inside: avoid;
}

.resume-trajectory .cv-item-header {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 11px;
}

.resume-trajectory .cv-item-header .cv-item-title {
    font-weight: bold;
    color: #1f2937;
    display: inline;
}

.resume-trajectory .cv-item-header .cv-item-org {
    font-weight: normal;
    color: #374151;
    display: inline;
}

.resume-trajectory .cv-item-sep {
    margin: 0 0.25rem;
    color: #d1d5db;
}

.resume-trajectory .cv-item-header .cv-dates {
    font-size: 10px;
    color: #6b7280;
    display: inline;
}

/* Compressed bullets — 10px. Used by BOTH modes (the comment used to say
   12.5px and the class was pdf-only, which is how the two renderers ended up
   a size apart). */
/* Compound selectors (.cv-bullets.cv-bullets--compressed), not the modifier
   alone. The element carries BOTH classes, and `.cv-bullets` further down this
   file declares 11px at the SAME specificity — so which one wins is decided by
   source order, and the two renderers do not agree on that: Chrome took the
   later 11px rule while mPDF took this 10px one. That is the whole of the
   "91% font shrink" the parity audit reported on trajectory; nothing was
   actually being scaled. Raising specificity makes both renderers pick this. */
.resume-trajectory .cv-bullets.cv-bullets--compressed {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0 0;
    font-size: 10px;
}

.resume-trajectory .cv-bullets.cv-bullets--compressed li {
    margin: 0.15rem 0;
    margin-left: 1rem;
    text-indent: -1rem;
    line-height: 1.4;
}

.resume-trajectory .cv-bullets.cv-bullets--compressed .cv-bullet-marker {
    margin-right: 0.4rem;
    color: #9ca3af;
}

/* ===== EDUCATION ===== */
.resume-trajectory .cv-item {
    position: relative;
    margin-bottom: 0.75rem;
    page-break-inside: avoid;
}

.resume-trajectory .cv-row {
    width: 100%;
    border-collapse: collapse;
}

.resume-trajectory .cv-row-main {
    vertical-align: top;
    width: 70%;
}

.resume-trajectory .cv-row-side {
    vertical-align: top;
    width: 30%;
    text-align: right;
    padding-left: 1rem;
    font-size: 10px;
}

.resume-trajectory .cv-item-title {
    font-weight: bold;
    color: #1f2937;
    display: block;
    margin-bottom: 0.1rem;
}

.resume-trajectory .cv-item-org,
.resume-trajectory .cv-item-field {
    font-size: 10px;
    color: #6b7280;
    display: block;
    margin-bottom: 0.1rem;
}

.resume-trajectory .cv-dates {
    font-size: 10px;
    color: #6b7280;
    display: block;
    margin-bottom: 0.2rem;
}

.resume-trajectory .cv-dates .sep {
    display: inline;
    margin: 0 0.1em;
}

.resume-trajectory .cv-item-loc {
    font-size: 10px;
    color: #6b7280;
    display: block;
}

.resume-trajectory .cv-item-details {
    font-size: 10px;
    color: #6b7280;
    margin-top: 0.3rem;
}

/* ===== LANGUAGES & CERTIFICATIONS ===== */
.resume-trajectory .cv-inline-item {
    font-size: 11px;
    margin-bottom: 0.35rem;
    line-height: 1.4;
    page-break-inside: avoid;
}

.resume-trajectory .cv-inline-item .cv-item-title {
    font-weight: bold;
    color: #1f2937;
    display: inline;
}

.resume-trajectory .cv-inline-item .cv-muted {
    color: #9ca3af;
    display: inline;
    margin: 0 0.15rem;
}

.resume-trajectory .cv-inline-item .cv-item-side {
    font-size: 10px;
    color: #6b7280;
    display: inline;
}

/* ===== BULLETS (standard, for edit mode) ===== */
.resume-trajectory .cv-bullets {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0 0;
    font-size: 11px;
}

.resume-trajectory .cv-bullets li {
    position: relative;
    margin: 0.3rem 0;
    margin-left: 1.2rem;
    text-indent: -1.2rem;
    line-height: 1.4;
}

.resume-trajectory .cv-bullets .cv-bullet-marker {
    margin-right: 0.4rem;
    color: #9ca3af;
    font-weight: bold;
}

/* ===== EDIT MODE CONTROLS ===== */
.resume-trajectory .edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}

.resume-trajectory .cv-item:hover > .edit-controls,
.resume-trajectory .cv-bullets li:hover > .edit-controls,
.resume-trajectory .edit-controls:hover {
    opacity: 1;
}

.resume-trajectory .edit-controls button,
.resume-trajectory .cv-add {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    padding: 0.3rem 0.6rem;
    font-size: 10px;
    cursor: pointer;
    border-radius: 0;
    margin-right: 0.3rem;
}

.resume-trajectory .edit-controls button:hover,
.resume-trajectory .cv-add:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.resume-trajectory .cv-add {
    display: block;
    width: auto;
    padding: 0.4rem 0.8rem;
    margin-top: 0.5rem;
    font-weight: normal;
}

.resume-trajectory .cv-add--sm {
    display: inline-block;
    font-size: 9px;
    padding: 0.25rem 0.5rem;
    margin-top: 0.3rem;
}

.resume-trajectory .edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}

/* Editable fields in edit mode */
.resume-trajectory [x-editable] {
    outline: 1px dashed transparent;
    cursor: text;
}

.resume-trajectory [x-editable]:focus {
    outline: 1px dashed #2563eb;
    background-color: #eff6ff;
}

/* Checkboxes and labels */
.resume-trajectory .cv-current {
    display: block;
    font-size: 10px;
    margin-top: 0.3rem;
    cursor: pointer;
}

.resume-trajectory .cv-current input[type="checkbox"] {
    margin-right: 0.3rem;
}

/* ===== PDF / PRINT MODE =====
 * NOTE: mPDF renders for PRINT, so everything in here applies to the export
 * while the builder canvas (screen) ignores it. That asymmetry is the whole
 * reason this block must never carry geometry.
 *
 * It used to open with `.resume-trajectory { width:auto; margin:0; padding:0 }`,
 * which cancelled the wrapper's 40px padding in the PDF only: every text run
 * in the real export started at x=0.0 (against x=77 on pulse, x=52 on
 * sapphire) — content bleeding to the sheet edge — and the content box grew
 * from 714px to 794px, so the export wrapped less and came out 137px SHORTER
 * than the canvas the editor measured. That is why the builder reported two
 * pages for a one-page export. The page-break rules below are kept: mPDF does
 * honour them and §7 requires them. */
@media print {
    .resume-trajectory .edit-controls,
    .resume-trajectory .cv-add {
        display: none;
    }

    .resume-trajectory [x-editable] {
        outline: none;
        cursor: auto;
    }

    .resume-trajectory .cv-item {
        page-break-inside: avoid;
    }

    .resume-trajectory .cv-skills-grid .cv-skill-cell {
        page-break-inside: avoid;
    }
}