/*
 * Pastel template — soft rose full-height left rail with photo, plain-header
 * main column. Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS
 * grid: the two columns are a single table (26% / 74%), so the two renderers
 * agree.
 *
 * Palette is deliberately gentle (rose #be185d accent on a #fff1f2 rail) for
 * care / beauty / HR roles, but body text stays near-black (#1f2937) so the
 * page keeps accessible contrast — the pink is structural, never load-bearing
 * for legibility.
 */

/* ---- 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. */
/* The rose wash. An @page background covers the FULL sheet — it ignores the
   page margins above and is repainted per page — so the band reaches the very
   bottom of every page including the last, which the old fixed-height <td>
   background could never do beyond page 1.
   Basepath-relative URL: PdfService calls SetBasePath(public/); a root-relative
   '/assets/...' silently resolves to nothing and the band renders white.
   Regenerate with scripts/generate-band-assets.php — the band x-position must
   stay in lockstep with .cv-sidebar's width below. */
@page {
    margin: 40px 0 40px 0;
    background: url('assets/img/templates/bands/pastel.png');
    background-image-resize: 6;
}
@page :first {
    margin-top: 0;
}

/* Edit mode only: @page is print-only, so the builder canvas would show white
   where the wash belongs. Never emitted in pdf mode. */
.cv-layout--edit {
    background-image: linear-gradient(to right, #fff1f2 0, #fff1f2 26%, #ffffff 26%);
}

.resume-page.resume-pastel {
    width: 794px;               /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    /* Deliberately NO background: a wrapper background paints over the @page
       band for the whole extent of the flowed content, leaving the wash visible
       only in the blank tail of the last page. Sheet colour comes from the band
       PNG in pdf mode and .cv-layout--edit in edit mode. */
    color: #1f2937;
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
}

/* 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 whole layout is a table, so
   the font must be declared at td level too. No-op in the browser. */
.resume-pastel td {
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #1f2937;
}

/* ---- two-column layout: float, NOT a table ----------------------------
 * Was a two-cell single-row <table> so the sidebar <td> could carry a fixed
 * height + background. That shape cannot paginate — mPDF only breaks a table
 * between <tr> boundaries, so a lone row has none and a long resume was
 * font-shrunk to fit (measured: 2.5pt against a declared 10.13pt). */
.resume-pastel .cv-layout {
    width: 100%;
}
.resume-pastel .cv-layout:after {
    content: "";
    display: table;
    clear: both;
}
/* Each cell rule is self-sufficient (vertical-align on the td itself): a
   `> tr > td` child combinator never matches in the browser (it inserts
   <tbody>), and without vertical-align:top mPDF centers the shorter column
   vertically in the full-height row (td default is middle). */

/* ---- sidebar (left, 26%, soft rose wash, full page height) --------------
 * `height` (not `min-height`) is set directly on this <td> — the proven
 * full-height-paint technique (onyx/slate/riviera): mPDF ignores
 * height/min-height on a nested block *inside* a table cell for the cell's
 * own painted background, but honors a CSS `height` declared directly on the
 * <td>, extending the fill to the full page. mPDF still lets the cell grow
 * taller than this if content needs more room.
 * Single-row-table note: this whole page is one single-row <table>, so mPDF
 * has no row boundary to break at within the lone <tr> — overflow content is
 * shrunk to fit one page rather than flowing to a second, which is exactly
 * why this template is multipage:false in the registry (cvg-template §5/§6/§8).
 */
/* ---- sidebar (left, 26%) ----------------------------------------------
 * No background and no height: both used to paint the wash, and both forced
 * the un-paginatable table. The colour is the @page band now. */
.resume-pastel .cv-sidebar {
    float: left;
    width: 26%;
    box-sizing: border-box;
    padding: 34px 20px;
}
.resume-pastel .cv-sidebar-inner {
    box-sizing: border-box;
}
.resume-pastel .cv-sidebar td {
    color: #1f2937;
}

/* Photo slot: single-cell table so the slot keeps its geometry inside the
   sidebar cell (block margins are dropped there in mPDF). */
.resume-pastel .cv-photo-wrap {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}
.resume-pastel .cv-photo-wrap td {
    padding: 0 0 6px;
    text-align: center;
}
.resume-pastel .cv-photo,
.resume-pastel .cv-photo-initials {
    margin: 0 auto;
}

/* Side sections: the inter-section gap is the title row's uniform margin-top
   (block margins on the .cv-side-section div are dropped inside the sidebar
   cell in mPDF; a nested table's margin renders in both). */
.resume-pastel .cv-side-section {
    margin-bottom: 0;
}
.resume-pastel .cv-side-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 10px;
}
.resume-pastel .cv-side-title-row td {
    border-bottom: 1px solid #f9a8c4;
    padding: 0 0 6px;
}
.resume-pastel .cv-side-title {
    font-size: 11.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #be185d;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

/* Contact list: glyph + text, each on its own line, 12px. Single-cell table
   per line (block margins are dropped inside a <td> in mPDF); the icon-text
   gap is a literal space — inline-block margins are dropped there too. */
.resume-pastel .cv-contact-list {
    font-size: 12px;
}
.resume-pastel .cv-contact-item {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 7px;
}
.resume-pastel .cv-sidebar .cv-contact-item td {
    padding: 0;
    font-size: 12px;
    color: #374151;
    word-wrap: break-word;
}
.resume-pastel .cv-icon {
    display: inline-block;
    margin-right: 4px;
}
.resume-pastel .cv-icon.cv-icon-linkedin {
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 8px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    border-radius: 2px;
    margin-right: 4px;
}
/* Languages and the soft-skills custom block moved OUT of the rail on
   2026-08-05 (§7a.3): the rail is a float, and mPDF silently drops
   floated-column entries it will not carry onto the next page. Languages now
   uses the SAME .cv-skill-grid two-column table as skills in the main column;
   the custom block renders through the ordinary custom-section path. The old
   .cv-side-lang-* / .cv-soft-* rail rules went with them. The dot rules stay —
   the grid still renders proficiency dots, just against white now. */
.resume-pastel .cv-dot {
    font-size: 9px;
    margin-right: 1px;
}
.resume-pastel .cv-dot-off {
    color: #e6c3cf;
}
.resume-pastel .cv-dot-btn {
    font-family: inherit;
    font-size: 11px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 1px;
    color: #e6c3cf;
}
.resume-pastel .cv-dot-btn.cv-dot-on {
    color: #be185d;
}

/* ---- main column (right, 74%) ------------------------------------------- */
/* margin-left (not a width) holds the column indent on pages 2+, where the
   float no longer exists but the band still paints under that strip. */
.resume-pastel .cv-main {
    margin-left: 26%;
    box-sizing: border-box;
}

/* Header: single-cell table so the column padding survives inside the
   .cv-main cell (a nested div's padding is dropped there in mPDF). */
.resume-pastel .cv-header-table {
    width: 100%;
    border-collapse: collapse;
}
.resume-pastel .cv-header-cell {
    padding: 34px 36px 0;
}
.resume-pastel .cv-name {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.15;
    margin: 0 0 4px;
    color: #1f2937;
}
.resume-pastel .cv-jobtitle {
    font-size: 15px;
    font-weight: normal;
}
/* pdf-mode decorative rule: a content-less div's width/height collapse
   inside the header cell in mPDF and nothing paints — a fixed-layout
   single-cell table with the width on the td and the line as the cell's own
   top border draws it reliably (table-layout:fixed keeps mPDF from shrinking
   the table to its &nbsp; content). */
.resume-pastel .cv-header-rule {
    border-collapse: collapse;
    table-layout: fixed;
    width: 40px;
    margin: 12px 0 0;
}
.resume-pastel .cv-header-rule td {
    width: 40px;
    padding: 0;
    font-size: 1px;
    line-height: 1px;
    border-top: 2px solid;
}

/* Body: single-cell table so the column padding survives inside the .cv-main
   cell (same reason as the header). */
/* .cv-body / .cv-body-cell are gone from pdf markup — that single-cell table
   wrapped EVERY section in one <tr>, leaving mPDF no break point. The padding
   now sits on .cv-main-body, a plain block that paginates. */
.resume-pastel .cv-main-body {
    padding: 20px 36px 36px;
}

.resume-pastel .cv-section {
    margin-bottom: 18px;
}

/* pdf-mode section title rows: a heading's border-bottom shrinks to its text
   width and its margins are dropped inside the body cell in mPDF — both are
   avoided by using a short fixed-width rule table (same technique as
   .cv-header-rule) instead of a border-bottom, so the underline stays a
   deliberate 20px tick. The margin-top on this row doubles as the
   inter-section gap. */
.resume-pastel .cv-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 10px;
}
.resume-pastel .cv-title-row td {
    padding: 0;
}
.resume-pastel .cv-section-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
}
.resume-pastel .cv-title-rule {
    border-collapse: collapse;
    table-layout: fixed;
    width: 20px;
    margin: 5px 0 0;
}
.resume-pastel .cv-title-rule td {
    width: 20px;
    padding: 0;
    font-size: 1px;
    line-height: 1px;
    border-top: 2px solid;
}

/* ---- items (div in edit mode / table in pdf mode, same class) --------- */
/* Keep-together (skill §7). Spacing is margin-TOP via additive sibling
   selectors, never margin-bottom: margin-bottom on a many-times-repeated
   avoid block is double-counted in mPDF's pagination estimate and opens a
   blank trailing page (seen on riviera). */
.resume-pastel .cv-item {
    position: relative;
    page-break-inside: avoid;
}
.resume-pastel .cv-section-head-group + .cv-item,
.resume-pastel .cv-item + .cv-item {
    margin-top: 14px;
}
/* mPDF ignores page-break-after:avoid on a heading alone. */
.resume-pastel .cv-section-head-group {
    page-break-inside: avoid;
}
/* Edit mode only. In pdf mode each entry is a <div class="cv-item">: an entry
   built as its own <table> gets font-shrunk by mPDF when it doesn't fit the
   space left on the page, instead of being moved to the next one (skill §7a,
   "per-entry <table>s shrink too"). Measured here as experience entries at
   10.8px and 9.9px against a 13.5px body — exactly 0.8x and 0.733x, each entry
   scaled independently to fit. */
.resume-pastel table.cv-item {
    width: 100%;
    border-collapse: collapse;
}
.resume-pastel .cv-item-cell {
    position: relative;
    padding: 0;
}

/* Two-column "title left / dates right" via table (mPDF-safe). */
.resume-pastel .cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-pastel .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-pastel .cv-row-main {
    text-align: left;
}
.resume-pastel .cv-row-side {
    text-align: right;
    white-space: nowrap;
    width: 32%;
    color: #6b7280;
    font-size: 12px;
}
.resume-pastel .cv-item-title {
    font-weight: bold;
}
.resume-pastel .cv-item-org {
    font-style: italic;
    color: #4b5563;
}
.resume-pastel .cv-item-sep {
    color: #4b5563;
    font-style: normal;
}
.resume-pastel .cv-item-loc {
    font-style: italic;
}
.resume-pastel .cv-dates {
    font-weight: bold;
}
.resume-pastel .cv-item-details {
    margin-top: 3px;
}

/* Bullets — marker-span pattern: a two-cell table per bullet (fixed-width
   marker cell + text cell). mPDF drops li hanging indents and ignores
   `list-style: none` on the li inside a table cell, so the marker lives in
   its own td instead, giving an identical hanging indent in both renderers. */
.resume-pastel .cv-bullets {
    margin: 5px 0 0;
}
.resume-pastel .cv-bullet {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2px;
}
.resume-pastel .cv-bullet-mk {
    width: 16px;
    vertical-align: top;
    padding: 0;
}
.resume-pastel .cv-bullet-tx {
    vertical-align: top;
    position: relative;
    padding: 0;
}

/* Skills: two-column grid with a thin rose underline per cell (pdf mode). */
.resume-pastel .cv-skill-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2px;
}
.resume-pastel .cv-skill-col {
    width: 50%;
    vertical-align: top;
    padding: 3px 12px 4px 0;
    font-size: 12.5px;
    border-bottom: 1px solid #fecdd9;
}
.resume-pastel .cv-skill-col--empty {
    border-bottom: none;
}
.resume-pastel .cv-skill-mk {
    font-size: 12px;
}

/* Skill/language level dots (tpl_dots). */
.resume-pastel .cv-level {
    font-size: 10px;
    letter-spacing: 1px;
    margin-left: 4px;
}
.resume-pastel .cv-dot-on {
    color: #be185d;
}

/* Certifications (pdf mode: two-cell table — a float:right date doesn't
   float inside the body cell in mPDF). */
.resume-pastel .cv-inline-item {
    position: relative;
    margin-bottom: 4px;
}
.resume-pastel .cv-item-side {
    float: right;
    width: 70px;
    color: #6b7280;
    font-size: 12px;
}
.resume-pastel .cv-cert-row {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.resume-pastel .cv-cert-row td {
    vertical-align: top;
    padding: 0;
}
.resume-pastel .cv-cert-side {
    width: 70px;
    text-align: right;
    color: #6b7280;
    font-size: 12px;
}
.resume-pastel .cv-muted {
    color: #6b7280;
}

/* =====================================================================
 * Edit-mode affordances (browser only — these elements are never emitted in
 * pdf mode, so none of this reaches mPDF). Skills render as a taglist here
 * for easy editing; pdf mode uses the two-column grid above.
 * ===================================================================== */

.resume-pastel [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b7b7b7;
    font-style: italic;
    pointer-events: none;
}
.resume-pastel [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-pastel [contenteditable]:hover {
    box-shadow: 0 0 0 1px #f9c4d5;
}
.resume-pastel [contenteditable]:focus {
    box-shadow: 0 0 0 2px #be185d;
    background: #fff5f8;
}

.resume-pastel .cv-taglist {
    line-height: 2;
}
.resume-pastel .cv-tag {
    position: relative;
    display: inline-block;
    margin: 0 6px 4px 0;
    padding: 2px 8px;
    background: #fff1f2;
    border-radius: 3px;
}
.resume-pastel .cv-tag-x {
    font-family: inherit;
    border: none;
    background: none;
    color: #be185d;
    cursor: pointer;
    padding: 0 0 0 4px;
    opacity: 0;
    font-size: 13px;
}
.resume-pastel .cv-tag:hover .cv-tag-x {
    opacity: 1;
}

.resume-pastel .edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.resume-pastel .edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
.resume-pastel .cv-sidebar .edit-controls--inline {
    left: auto;
    right: -20px;
}
.resume-pastel .cv-item:hover > .edit-controls,
.resume-pastel .cv-inline-item:hover > .edit-controls,
.resume-pastel .cv-bullet-tx:hover > .edit-controls,
.resume-pastel .edit-controls:hover {
    opacity: 1;
}
.resume-pastel .edit-controls button {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid #ccc;
    background: #fff;
    color: #444;
    border-radius: 3px;
    cursor: pointer;
}
.resume-pastel .edit-controls button:hover {
    background: #be185d;
    border-color: #be185d;
    color: #fff;
}

.resume-pastel .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #f9a8c4;
    background: #fff;
    color: #be185d;
    border-radius: 4px;
    cursor: pointer;
}
.resume-pastel .cv-add:hover {
    background: #fff1f2;
    border-color: #be185d;
}
.resume-pastel .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}
.resume-pastel .cv-add--side {
    border-color: #f9a8c4;
    background: #fff;
    color: #be185d;
}

.resume-pastel .cv-level-toggle {
    font-family: inherit;
    font-size: 9px;
    border: 1px solid #f3c9d6;
    background: #fff;
    color: #6b7280;
    border-radius: 2px;
    padding: 0 3px;
    margin-left: 3px;
    cursor: pointer;
}
.resume-pastel .cv-level-text {
    display: inline-block;
    min-width: 20px;
}

.resume-pastel .cv-current {
    display: block;
    font-family: inherit;
    font-size: 11px;
    font-weight: normal;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    cursor: pointer;
}
.resume-pastel .cv-current input {
    vertical-align: middle;
}