/*
 * Sable template — one centered sand card, black editorial type.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid: floats /
 * tables / block layout only, so the two renderers agree.
 *
 * The résumé sits on a single centered #f5efe6 sand card on a white page.
 * The card is ONE table (`.cv-card`) sized to the white page's padded content
 * box, so the equal 55px gutters centre it (~86% of the sheet). The sand fill
 * is on every `<td>` — the one reliable full-width fill in mPDF — and cells
 * abut (border-collapse, no inter-row margin) so the sand reads as one
 * continuous card with clean side edges on every page. See sable.php's doc
 * comment for why the card paginates as one <tr> per entry (multipage:true).
 *
 * Every scrap of content lives inside a card <td>, so the slate (2026-07)
 * table-cell rulebook applies throughout: td-level font rule (mPDF doesn't
 * inherit font-family/size into cells), keyword `bold` only (numeric weights
 * ignored in cells), vertical gaps as nested single-cell tables (block
 * margins dropped in cells), bullets as two-cell marker/text tables.
 */

/* ---- 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: 30px 0 30px 0;
}
@page :first {
    margin-top: 0;
}

.resume-page.resume-sable {
    width: 794px;               /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 30px 55px;         /* white gutters; content box ~684px = the card, centred */
    background: #ffffff;
    color: #0a0a0a;
    font-family: 'DejaVu Sans', Arial, Helvetica, 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 (slate rework,
   2026-07). This whole template is table cells, so the font is declared at td
   level too. No-op in the browser, which inherits normally. */
.resume-sable td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #0a0a0a;
}

/* ---- the card ------------------------------------------------------------ */
.resume-sable .cv-card {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
/* Sand fill + side padding on every cell; the fill is what makes the card.
   Vertical rhythm is padding-top per cell variant (interior gaps stay inside
   the sand); only the final cell carries a bottom edge. No `padding`
   shorthand here so the variants below can set top/bottom without a
   specificity fight. */
.resume-sable .cv-cell {
    background: #f5efe6;
    padding-left: 28px;
    padding-right: 28px;
    vertical-align: top;
    /* Each cell is exactly one entry (or a title+first-entry head group), so
       keeping it whole is what stops a role's title/bullets splitting across a
       page and — because the title lives in the first entry's cell — what
       stops a section header being orphaned. mPDF breaks the card table
       between these rows. */
    page-break-inside: avoid;
}
.resume-sable .cv-cell-head  { padding-top: 18px; }   /* card top edge */
.resume-sable .cv-cell-sec   { padding-top: 16px; }   /* first cell of a section (spec: section top spacing) */
.resume-sable .cv-cell-item  { padding-top: 8px; }    /* subsequent entry cell */
.resume-sable .cv-cell-tight { padding-top: 3px; }    /* subsequent language/certification row */
.resume-sable .cv-cell-last  { padding-bottom: 18px; } /* card bottom edge (server-marked, §5 no :last-child) */

/* ---- header -------------------------------------------------------------- */
.resume-sable .cv-head {
    width: 100%;
    border-collapse: collapse;
}
.resume-sable .cv-head td {
    padding: 0;
    vertical-align: middle;
}
.resume-sable .cv-head-photo {
    width: 100px;
    padding-right: 24px;
}
.resume-sable .cv-photo,
.resume-sable .cv-photo-initials {
    display: block;
}
.resume-sable .cv-name {
    font-size: 30px;
    font-weight: bold;
    color: #0a0a0a;
    margin: 0;
    line-height: 1.1;
}
/* gaps under name / title are these nested tables' margins (block margins are
   dropped inside a <td> in mPDF; nested-table margins survive). */
.resume-sable .cv-title-line {
    width: 100%;
    border-collapse: collapse;
    margin: 5px 0 0;
}
.resume-sable .cv-title-line td { padding: 0; }
.resume-sable .cv-jobtitle {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #57534e;
    margin: 0;
}
.resume-sable .cv-contact-line {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 0;
}
.resume-sable .cv-contact-line td { padding: 0; }
.resume-sable .cv-contact {
    font-size: 11.5px;
    color: #57534e;
    line-height: 1.5;
}

/* 1px sand-toned rule under the header — border-top on a full-width cell
   paints edge-to-edge (a block border-bottom would shrink to text width in
   mPDF). */
.resume-sable .cv-rule {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 0;
}
.resume-sable .cv-rule td {
    border-top: 1px solid #d8cdb8;
    font-size: 0;
    line-height: 0;
    height: 1px;
    padding: 0;
}

/* ---- section titles ------------------------------------------------------ */
.resume-sable .cv-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 6px;
}
.resume-sable .cv-title-row td { padding: 0; }
.resume-sable .cv-section-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0a0a0a;
    margin: 0;
    padding: 0;
    border: none;
    /* Belt-and-suspenders: the title already shares its first entry's cell so
       it cannot be orphaned, but this keeps the header glued to what follows
       inside that cell too. */
    page-break-after: avoid;
}

/* ---- entry rows: title left / dates right (mPDF-safe two-cell table) ----- */
.resume-sable .cv-row {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 3px;
}
.resume-sable .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-sable .cv-row-main { text-align: left; }
.resume-sable .cv-row-side {
    text-align: right;
    /* NO white-space:nowrap. mPDF sizes a table from its cells' MINIMUM content
       widths, and a nowrap run wider than its column's share makes it scale the
       whole table's contents down (shrin_k) rather than wrap. Because this
       template's entire document is one .cv-card table, that scale lands on
       EVERY character in the export, not just this cell: measured on the FR
       sample, 82% of the document rendered at 12px against the 13.5px declared
       on both the wrapper and the td rule — a uniform 89% that reads as a
       perfectly plausible resume until something measures it. A spelled-out
       French range ("septembre 2016 – février 2019") is wider than 28% anyway,
       so it wraps to a second right-aligned line instead. Same mechanism as
       riviera and graphite. */
    width: 28%;
    color: #78716c;
    font-size: 11.5px;
}
.resume-sable .cv-item-title {
    font-weight: bold;
    color: #0a0a0a;
}
.resume-sable .cv-item-org {
    color: #44403c;
}
.resume-sable .cv-item-sep {
    color: #57534e;
}
.resume-sable .cv-item-field {
    color: #44403c;
}
.resume-sable .cv-dates {
    font-weight: bold;
    color: #78716c;
}
.resume-sable .cv-item-loc {
    font-style: italic;
    color: #78716c;
    font-size: 11px;
}
.resume-sable .cv-item-details {
    color: #292524;
    margin-top: 2px;   /* browser only; mPDF leans on the cv-row margin above (parity) */
}
.resume-sable .cv-muted { color: #78716c; }

/* Round bullet markers: one two-cell table per bullet — the fixed-width
   marker cell gives a hanging indent both renderers honor. */
.resume-sable .cv-bullet {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2px;
}
.resume-sable .cv-bullet-mk {
    width: 15px;
    vertical-align: top;
    padding: 0;
    color: #0a0a0a;
    font-size: 7px;
    line-height: 20px;  /* centers the dot on the first 13.5px/1.45 text line */
}
.resume-sable .cv-bullet-tx {
    vertical-align: top;
    position: relative;
    padding: 0;
}

/* Skills: one editorial dot-separated line. */
.resume-sable .cv-skills-line {
    line-height: 1.6;
    color: #292524;
}
.resume-sable .cv-level {
    font-size: 10px;
    letter-spacing: 1px;
    margin-left: 3px;
    white-space: nowrap;
}
.resume-sable .cv-dot-on  { color: #0a0a0a; }
.resume-sable .cv-dot-off { color: #d8cdb8; }

/* Languages: name bold, level after an em dash, one row each. */
.resume-sable .cv-lang {
    border-collapse: collapse;
    margin-bottom: 0;
}
.resume-sable .cv-lang td {
    padding: 0;
    position: relative;
}

/* Certifications: two-cell name/date row, one per cert. */
.resume-sable .cv-cert {
    width: 100%;
    border-collapse: collapse;
}
.resume-sable .cv-cert-cell {
    padding: 0;
    position: relative;
}

/* Custom "workshops": heading bold, sub muted, date right, text beneath. */
.resume-sable .cv-workshop .cv-item-org {
    font-style: italic;
    color: #44403c;
}

/* =====================================================================
 * Edit-mode affordances (browser only — never emitted in pdf mode).
 * ===================================================================== */

.resume-sable [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #a8a29e;
    font-style: italic;
    pointer-events: none;
}
.resume-sable [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-sable [contenteditable]:hover {
    box-shadow: 0 0 0 1px #e3d8c4;
}
.resume-sable [contenteditable]:focus {
    box-shadow: 0 0 0 2px #0a0a0a;
    background: #fffaf2;
}
.resume-sable .cv-contact [contenteditable] {
    display: inline-block;
    min-width: 40px;
    margin: 0 2px;
}

.resume-sable .cv-item {
    position: relative;
    margin-bottom: 13px;
}
.resume-sable .cv-item:last-child { margin-bottom: 0; }
.resume-sable .cv-bullets { margin-top: 0; }

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

.resume-sable .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px dashed #cbb994;
    background: #fff;
    color: #6b5c3e;
    border-radius: 4px;
    cursor: pointer;
}
.resume-sable .cv-add:hover {
    background: #fffaf2;
    border-color: #0a0a0a;
    color: #0a0a0a;
}
.resume-sable .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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

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

.resume-sable .cv-dot-btn {
    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0 1px;
    border: none;
    background: none;
    cursor: pointer;
}
.resume-sable .cv-level-toggle {
    font-family: inherit;
    font-size: 9px;
    line-height: 1;
    padding: 1px 3px;
    margin-left: 3px;
    border: 1px solid #d6cbb8;
    background: #fff;
    color: #78716c;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-sable .cv-tag:hover .cv-level-toggle,
.resume-sable .cv-lang td:hover .cv-level-toggle { opacity: 1; }
.resume-sable .cv-level-text {
    display: inline-block;
    min-width: 20px;
}