/*
 * Terre template — a terracotta identity row (name / title / summary beside a
 * round portrait) sitting on top of a solid terracotta contact band, over a
 * single white column whose every section label sits under a pale-clay bar.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid, no
 * transforms: floats / tables / block layout only, so the two renderers agree.
 *
 * Palette: terracotta #c2410c (the contact band, the section labels, the chip
 * text, the bullet markers and the level dots), pale clay #ffedd5 (the band's
 * text and the bar over every section label), apricot #fdba74 (the chip
 * outlines), deep brown #431407 for the name and every entry title, stone
 * #44403c for body text. The terracotta pair is a fixed design decision, not
 * the user's settings.accentColor (a second accent would fight the band), so
 * tpl_dots is called with a null accent and the dots inherit .cv-dot-on.
 *
 * The contact band's fill is a <td> background — a cell background paints one
 * contiguous rect across the full cell, while a <div> background paints one
 * rect per rendered text line (skill §5). It is the ONLY fill on the page,
 * because it is also the only coloured area that never sits inside a
 * page-break-inside:avoid block; everywhere else the clay is drawn with
 * borders, for the reason set out over the section-label rules below.
 *
 * multipage:true — no fixed heights anywhere, every entry block is
 * page-break-inside:avoid, and inter-block spacing is margin-TOP only (a
 * margin-bottom on a repeated avoid block double-counts in mPDF's pagination
 * estimate and opens a blank trailing page).
 *
 * Font stacks lead with a DejaVu face: mPDF substitutes Arial/Helvetica with
 * DejaVu *Condensed* (no bold face), so bold weights would silently export as
 * regular otherwise. Every bold below is the KEYWORD `bold`, never a numeric
 * 600/700 (mPDF ignores numeric weights).
 */

/* ---- 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.resume-terre {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 0;                  /* the header and body carry their own side padding,
                                    so the contact band can run full-bleed */
    background: #ffffff;
    color: #44403c;
    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. The header, the
   band, every section label, every entry row and both grids are tables here,
   so the font must be declared at td level too. No-op in the browser. Rules
   that override size/color inside a specific cell are ordered after this. */
.resume-terre td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #44403c;
}

/* ---- header: identity + standfirst summary | round portrait -------------- */
.resume-terre .cv-header {
    padding: 42px 52px 20px;
}
.resume-terre table.cv-head {
    width: 100%;
    border-collapse: collapse;
}
.resume-terre td.cv-head-id {
    vertical-align: top;
    padding: 0 26px 0 0;         /* the photo column's gutter lives here — see below */
}
/* 110px wide and UNPADDED on purpose: the two renderers disagree on whether a
   td's CSS width includes its padding (mPDF border-box, the browser
   content-box), so a padded fixed-width cell drifts between them. The cell is
   exactly the portrait's width and the gutter is the identity cell's own
   padding-right instead. */
.resume-terre td.cv-head-photo {
    width: 110px;
    padding: 0;
    vertical-align: top;
}
/* No width/height here: tpl_photo emits both inline (and the pdf-mode initials
   fallback is a GD PNG, which keeps its geometry — and its true circle —
   inside a cell). */
.resume-terre .cv-photo,
.resume-terre .cv-photo-initials {
    display: block;
}
/* Identity lines are ROWS of a nested table, not margin-stacked blocks: mPDF
   drops block margins inside a cell, so the vertical rhythm is td padding. */
.resume-terre table.cv-id {
    width: 100%;
    border-collapse: collapse;
}
.resume-terre table.cv-id td {
    padding: 0;
}
.resume-terre td.cv-id-title {
    padding-top: 7px;
}
.resume-terre td.cv-id-summary {
    padding-top: 12px;
}
.resume-terre .cv-name {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 27px;
    font-weight: bold;
    color: #431407;
    letter-spacing: -0.2px;
    line-height: 1.12;
    margin: 0;
}
.resume-terre .cv-jobtitle {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: #c2410c;
}
/* Ragged-right, never justify (mPDF spacing artifacts). */
.resume-terre .cv-summary {
    font-size: 12.5px;
    color: #57534e;
    line-height: 1.55;
    text-align: left;
}

/* ---- contact band: full-bleed solid terracotta ---------------------------
 * Four fixed 25% cells per row, so the entries line up in a grid however many
 * contact fields are filled. The fill is the cells' own background — the
 * signature element of the template, and it sits BELOW the identity row, not
 * above it. The first cell of each row carries the left inset (a table-level
 * padding would not survive mPDF); it is deliberately smaller than the body's
 * 52px so a full email address still fits inside a 25% column. */
.resume-terre table.cv-band-t {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.resume-terre td.cv-band-cell {
    width: 25%;
    background: #c2410c;
    color: #ffedd5;
    font-size: 11px;
    line-height: 1.5;
    padding: 11px 10px;
    vertical-align: middle;
}
.resume-terre td.cv-band-cell.cv-band-cell-first {
    padding-left: 26px;
}
.resume-terre .cv-icon {
    display: inline-block;
    color: #ffedd5;
}
/* The linkedin badge is a filled square with its own text: on the band it
   takes a darker brown fill so it reads against the terracotta. */
.resume-terre .cv-icon.cv-icon-linkedin {
    color: #ffedd5;
    padding: 0 3px;
    font-size: 9px;
}

/* ---- body ---------------------------------------------------------------- */
/* Zero bottom padding: real trailing space opens a blank final page in mPDF. */
.resume-terre .cv-body {
    padding: 0 52px;
}
/* No bottom margins anywhere: the inter-section gap is the section head's own
   margin-top, so nothing reserves trailing space at the end of the flow. */
.resume-terre .cv-section {
    margin: 0;
}
/* pdf mode: mPDF doesn't reliably honor :last-child, so the server marks
   whichever section/item renders last with this plain class instead. Unscoped
   on purpose — it applies to whichever element carries it. Belt-and-braces
   here, since spacing is margin-top only. */
.resume-terre .is-last {
    margin-bottom: 0;
}

/* ---- section labels under a pale-clay band ------------------------------
 * The band is a thick BORDER-TOP, not a background, and that is a correctness
 * choice rather than a stylistic one. Inside a page-break-inside:avoid block —
 * which every section label sits in, per the head-group rule below — mPDF
 * cannot paint a fill correctly either way, confirmed by rendering both
 * against mPDF (2026-07):
 *   - a <td> background paints, but is flushed onto the starting page by the
 *     AddPage that mPDF's trial pass triggers, so a label that moves to the
 *     next page leaves an empty ghost strip behind on the previous one;
 *   - a <div> background never ghosts (PaintDivBB returns early while
 *     keep_block_together is set, Mpdf.php:17162) but for the same reason is
 *     not painted at all unless the block happens to be re-rendered after a
 *     rewind — labels that never crossed a boundary simply lost their strip.
 * Borders are drawn before that early return and go into the page's own
 * content stream, so they paint everywhere and are discarded with the page on
 * a rewind: the band renders identically in both renderers, on every page. */
.resume-terre .cv-sec-head {
    page-break-inside: avoid;
    page-break-after: avoid;
}
.resume-terre .cv-sec-strip {
    border-top: 12px solid #ffedd5;
    padding: 3px 0 0;
    margin: 20px 0 8px;
}
.resume-terre .cv-sec-title {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #c2410c;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.25;
    margin: 0;
}

/* ---- section head group (multipage: keep the label with its first entry) ---
 * page-break-after:avoid on the label alone is not reliable in mPDF — the
 * page-break-inside:avoid here is what actually holds the label and its first
 * entry together on one page. */
.resume-terre .cv-section-head-group {
    page-break-inside: avoid;
}

/* ---- entries ------------------------------------------------------------- */
/* Inter-entry spacing is an UNCONDITIONAL margin-top on every entry (never
   margin-bottom, which double-counts in mPDF's pagination estimate; and never a
   conditional first-item override, which revives that same blank page when two
   avoid blocks nest). */
.resume-terre .cv-item {
    position: relative;
    page-break-inside: avoid;
    margin-top: 12px;
}
/* Two-column "title left / dates right" via table (mPDF-safe, no float — a
   float inside a page-break-inside:avoid block makes mPDF miscalculate the
   block height and duplicate content). */
.resume-terre .cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-terre .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-terre .cv-row-main {
    text-align: left;
}
/* No white-space:nowrap: a long French range ("septembre 2021 – juin 2024") is
   wider than this column anyway, and a nowrap cell can scale a whole layout
   table down in mPDF. The column is widened instead. */
.resume-terre .cv-row-side {
    text-align: right;
    width: 30%;
}
.resume-terre .cv-item-title {
    font-weight: bold;
    color: #431407;
}
.resume-terre .cv-item-org {
    color: #c2410c;
}
.resume-terre .cv-item-sep {
    color: #a8a29e;
}
/* edit mode only: the comma between an editable school and field sits on its
   own source line, so it pulls back over that newline's rendered space. In pdf
   mode the comma is emitted glued inside the school span and never uses this. */
.resume-terre .cv-sep-comma {
    margin-left: -4px;
}
.resume-terre .cv-item-field {
    color: #57534e;
}
.resume-terre .cv-item-loc {
    font-size: 11.5px;
    color: #78716c;
}
.resume-terre .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #78716c;
}
.resume-terre .cv-item-details {
    margin-top: 3px;
    font-size: 12.5px;
    color: #57534e;
}

/* Bullets: native <ul>/<li> with a real ▪ marker span and a hanging indent
   (padding-left + negative text-indent). Native list items let mPDF estimate
   the enclosing avoid block's height accurately, and the marker is real HTML
   text — a CSS content: marker renders nothing at all in mPDF. */
.resume-terre .cv-bullets {
    margin: 6px 0 0;
    padding-left: 0;
    list-style: none;
}
.resume-terre .cv-bullets li {
    position: relative;
    padding-left: 15px;
    text-indent: -15px;
    margin-bottom: 3px;
    color: #44403c;
    font-size: 13px;
}
.resume-terre .cv-bk {
    color: #c2410c;
    margin-right: 6px;
}

/* ---- skills chips -------------------------------------------------------
 * pdf mode: a 3-column grid table, one auto-width chip TABLE per cell. Chips
 * cannot be inline-blocks there — consecutive inline-blocks with no whitespace
 * merge into one undifferentiated box in mPDF, and repeated floats stack
 * instead of packing into rows. Edit mode keeps browser-only inline-block
 * chips (further down) styled to the same border, padding and type.
 * The chips are outlined, never filled, for the same reason the section bands
 * are borders rather than backgrounds: the skills head-group is a
 * page-break-inside:avoid block, and a cell background inside one is left
 * behind as a ghost rect on the previous page when the block moves (the first
 * terre export ghosted six filled chips at the foot of page 1). Cell borders
 * go into the page's own content stream and are discarded with it. */
.resume-terre table.cv-chip-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.resume-terre td.cv-chip-cell {
    width: 33.33%;
    vertical-align: top;
    padding: 0 8px 6px 0;
}
.resume-terre table.cv-chip {
    border-collapse: collapse;
}
.resume-terre .cv-chip td {
    border: 1px solid #fdba74;
    color: #7c2d12;
    padding: 3px 9px;
    font-size: 12px;
}

/* ---- languages grid ------------------------------------------------------
 * Two real table columns, never repeated floats (mPDF stacks those instead of
 * packing them into rows) and never CSS columns (unsupported). One <tr> per
 * pair also gives mPDF a break point inside the section. */
.resume-terre table.cv-grid {
    width: 100%;
    border-collapse: collapse;
}
.resume-terre td.cv-grid-col {
    width: 50%;
    vertical-align: top;
    padding: 0 14px 4px 0;
    font-size: 13px;
}
.resume-terre .cv-lang-name {
    color: #431407;
}
.resume-terre .cv-lang-sep {
    color: #a8a29e;
}
/* The level slot holds EITHER dot glyphs or free text (tpl_dots passes text
   through untouched), so the tracking that spaces the dots apart lives on the
   dots themselves — otherwise a written level like "C1 - Autonome" exports as
   letterspaced small type. */
.resume-terre .cv-level {
    font-size: 12px;
    color: #57534e;
    white-space: nowrap;
}
.resume-terre .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-terre .cv-dot-on {
    color: #c2410c;
}
.resume-terre .cv-dot-off {
    color: #e7e5e4;
}

/* =====================================================================
 * Edit-mode affordances (browser only — these elements are never
 * emitted in pdf mode, so none of this reaches mPDF).
 * Every [contenteditable]/[data-ph] rule stays at ONE level below the page
 * class: mPDF can't parse those chunks and applies the declaration to a
 * two-or-more-level prefix instead, repainting whatever pdf-mode element that
 * prefix names (confirmed on graphite, 2026-07).
 * ===================================================================== */

.resume-terre [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #d6c3b4;
    font-style: italic;
    pointer-events: none;
}
.resume-terre [contenteditable] {
    outline: none;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-terre [contenteditable]:hover {
    box-shadow: 0 0 0 1px #fdba74;
}
.resume-terre [contenteditable]:focus {
    box-shadow: 0 0 0 2px #c2410c;
    background: #fff7ed;
}

/* Skills chips, edit mode only (pdf mode renders the chip-table grid above). */
.resume-terre .cv-chip-list {
    font-size: 12px;
}
/* Outlined, not filled — matching the pdf-mode chip tables exactly (see the
   chip-grid note above for why those carry no fill). */
.resume-terre .cv-chip-edit {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 9px;
    border: 1px solid #fdba74;
    background: #ffffff;
    color: #7c2d12;
    font-size: 12px;
    white-space: nowrap;
}
.resume-terre .cv-langs {
    font-size: 13px;
}
.resume-terre .cv-lang-line {
    position: relative;
    margin-bottom: 3px;
}

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

.resume-terre .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px dashed #fdba74;
    background: #ffffff;
    color: #c2410c;
    border-radius: 4px;
    cursor: pointer;
}
.resume-terre .cv-add:hover {
    background: #fff7ed;
    border-color: #c2410c;
}
.resume-terre .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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

.resume-terre .cv-chip-x {
    font-family: inherit;
    border: none;
    background: none;
    color: #b00;
    cursor: pointer;
    padding: 0 0 0 3px;
    opacity: 0;
    font-size: 13px;
}
.resume-terre .cv-chip-edit:hover .cv-chip-x {
    opacity: 1;
}

.resume-terre .cv-dot-btn,
.resume-terre .cv-level-toggle {
    font-family: inherit;
    border: none;
    background: none;
    padding: 0 1px;
    cursor: pointer;
    font-size: 10px;
}
.resume-terre .cv-dot-btn.cv-dot-on {
    color: #c2410c;
}
.resume-terre .cv-dot-btn.cv-dot-off {
    color: #e7e5e4;
}
.resume-terre .cv-level-toggle {
    font-size: 9px;
    color: #a8a29e;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-terre .cv-chip-edit:hover .cv-level-toggle,
.resume-terre .cv-lang-line:hover .cv-level-toggle {
    opacity: 1;
}