/*
 * Atrium template — an architect's monochrome order: identity over a framed
 * square portrait, then a body where EVERY section is drawn inside its own thin
 * black frame. Zero colour; hierarchy comes from borders and weight alone.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid, no
 * transforms: tables / block layout only, so the two renderers agree.
 *
 * THE FRAME — the one construction every section reuses:
 *   table.cv-box  -> the frame's outer box, carrying only the 16px margin-top
 *                    that separates it from the frame above and the
 *                    page-break-inside:avoid that keeps it whole.
 *   td.cv-box-cell -> the 1px #111827 border and the 16px interior padding.
 * The border lives on the CELL, not the table: mPDF paints a cell border as one
 * contiguous rectangle in both renderers, and a single-cell table that doesn't
 * fit the space left on the page is moved WHOLE to the next page (measured by
 * isolated mPDF probe for this build), so the frame always closes on four
 * sides. `border-collapse: separate; border-spacing: 0` keeps the table exactly
 * as tall as its cell — `collapse` puts half the border outside the row box in
 * the browser only, which drifts the two renderers apart.
 *
 * EVERYTHING BELOW THE HEADER SITS INSIDE A <td>, so the whole in-td trap class
 * applies and is designed around here:
 *   - fonts are declared at td level (mPDF does not inherit font-family/size
 *     into cells — text silently falls back to the serif document default);
 *   - every bold is the KEYWORD `bold`, never a numeric 600/700 (mPDF ignores
 *     numeric weights);
 *   - every vertical gap inside a frame is a nested table's own margin-top —
 *     block margins/paddings are dropped inside a cell;
 *   - the rule under a section header is a nested table's td border-bottom, not
 *     the h2's own border-bottom (which shrinks to its text width in a cell);
 *   - bullets are two-cell tables (marker cell + text cell) because an li
 *     hanging indent is dropped in a cell, and the ▪ is real HTML text — CSS
 *     generated content renders nothing at all in mPDF.
 *
 * Palette: ink #111827 (frames, name, entry titles, section labels, bullets),
 * body #1f2937, secondary #4b5563, dates/meta #6b7280, separators #9ca3af. It
 * is a fixed design decision, not the user's settings.accentColor — a colour
 * would break the monochrome premise — so tpl_dots is called with a null accent
 * and the dots inherit .cv-dot-on.
 *
 * multipage:true — no fixed heights anywhere, no bottom padding on the page
 * (real trailing space opens a blank final page), every frame is
 * page-break-inside:avoid, and inter-frame spacing is an unconditional
 * margin-TOP: a margin-bottom on a repeated avoid block double-counts in mPDF's
 * pagination estimate, and mPDF drops `+` sibling rules entirely, so neither
 * the sibling-combinator nor the first-child-override form works here.
 * Experience is one frame PER ENTRY (see atrium.php's header comment) so no
 * frame can ever be taller than a page and have to split its border.
 *
 * 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.
 */

/* ---- 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-atrium {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 40px 44px 0;        /* zero bottom: trailing space opens a blank final page */
    background: #ffffff;
    color: #1f2937;
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
}
/* mPDF does NOT inherit font-family/size into table cells — and in this
   template essentially all content is inside one, so this rule is what keeps
   the body out of the serif document default. No-op in the browser. Rules that
   override size/colour inside a specific cell are ordered after it. */
.resume-atrium td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1f2937;
}

/* ---- header: identity | framed square portrait ---------------------------
 * border-spacing:0 with separate borders so the portrait cell's own frame is
 * drawn in full and the identity cell stays unframed beside it. */
.resume-atrium table.cv-head {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.resume-atrium td.cv-head-id {
    vertical-align: top;
    padding: 0 24px 0 0;         /* the portrait column's gutter lives here */
}
/* box-sizing so the declared 110px means the same in both renderers: mPDF
   measures a cell from its padding box (the border sits outside), the browser
   from the content box unless told otherwise. 110 - 12 padding leaves ~96-98px
   of content either way, which the 95px portrait fits without overflow. */
.resume-atrium td.cv-head-photo {
    width: 110px;
    box-sizing: border-box;
    padding: 6px;
    vertical-align: top;
    border: 1px solid #111827;
}
/* No width/height here: tpl_photo emits both inline, and the pdf-mode initials
   fallback is a GD PNG, which keeps its geometry inside a cell. */
.resume-atrium .cv-photo,
.resume-atrium .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-atrium table.cv-id {
    width: 100%;
    border-collapse: collapse;
}
.resume-atrium table.cv-id td {
    padding: 0;
}
.resume-atrium td.cv-id-title {
    padding-top: 8px;
}
.resume-atrium td.cv-id-contact {
    padding-top: 10px;
}
.resume-atrium .cv-name {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #111827;
    letter-spacing: -0.3px;
    line-height: 1.1;
    margin: 0;
}
.resume-atrium .cv-jobtitle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.6px;
    color: #4b5563;
}
.resume-atrium .cv-contact {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.6;
}
.resume-atrium .cv-contact-sep {
    color: #9ca3af;
}

/* ---- the frame -----------------------------------------------------------
 * margin-TOP only, unconditional, with no first-item override of any kind (see
 * the multipage note at the top of this file). The gap under the header is this
 * same 16px. */
.resume-atrium table.cv-box {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
    page-break-inside: avoid;
}
.resume-atrium td.cv-box-cell {
    border: 1px solid #111827;
    padding: 16px;
    vertical-align: top;
}
/* pdf mode: mPDF doesn't reliably honor :last-child, so the server marks
   whichever frame 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-atrium .is-last {
    margin-bottom: 0;
}

/* Section label + the rule beneath it, spanning the frame's interior. The rule
   is the nested cell's border-bottom: an h2's own border-bottom shrinks to its
   text width inside a table cell. */
.resume-atrium table.cv-sec-row {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 2px;
}
.resume-atrium table.cv-sec-row td {
    border-bottom: 1px solid #111827;
    padding: 0 0 6px;
}
.resume-atrium .cv-sec-title {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #111827;
    border: none;
    margin: 0;
    padding: 0;
    page-break-after: avoid;
}

/* ---- entries inside a frame ----------------------------------------------
 * Two-cell "content left / date right" rows. A table and not a float: a float
 * inside a page-break-inside:avoid block makes mPDF miscalculate the block
 * height and duplicate content. */
.resume-atrium table.cv-entry {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 11px;
}
.resume-atrium td.cv-entry-main {
    padding: 0;
    vertical-align: top;
    text-align: left;
}
/* No white-space:nowrap: a spelled-out French range ("septembre 2021 – juin
   2024") is wider than this column, and one nowrap cell shrinks the WHOLE
   layout table in mPDF (graphite, 2026-07). It wraps to a second right-aligned
   line instead. */
.resume-atrium td.cv-entry-side {
    width: 150px;
    padding: 0 0 0 14px;
    vertical-align: top;
    text-align: right;
}
/* Full-width follow-on rows inside a frame (the summary paragraph, an entry's
   details line). Their only job is to carry the gap a block margin cannot. */
.resume-atrium table.cv-text-row,
.resume-atrium table.cv-sub-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-atrium table.cv-text-row {
    margin-top: 10px;
}
.resume-atrium table.cv-sub-row {
    margin-top: 4px;
}
.resume-atrium table.cv-text-row td,
.resume-atrium table.cv-sub-row td {
    padding: 0;
}
.resume-atrium .cv-item-title {
    font-weight: bold;
    color: #111827;
}
.resume-atrium .cv-item-org {
    color: #1f2937;
}
.resume-atrium .cv-item-field {
    color: #4b5563;
}
.resume-atrium .cv-item-sep {
    color: #9ca3af;
}
/* edit mode only: a separator that must read as glued to the preceding editable
   text (the education comma) can't be nested inside it — anything inside an
   editable becomes stored user data — so it sits on its own source line and
   pulls back over that newline's rendered space. The pdf branch emits the same
   comma with no whitespace at all and never uses this class. */
.resume-atrium .cv-sep-tight {
    margin-left: -4px;
}
.resume-atrium .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.2px;
    color: #6b7280;
}
.resume-atrium .cv-item-loc {
    font-size: 11px;
    color: #9ca3af;
}
.resume-atrium .cv-item-details {
    font-size: 12.5px;
    color: #4b5563;
}
/* Ragged-right, never justify (mPDF spacing artifacts). */
.resume-atrium .cv-summary {
    text-align: left;
    color: #1f2937;
}

/* Bullets: a two-cell table each — a real hanging indent that survives inside a
   cell, where an li's own indent is dropped. The marker is real HTML text; a
   CSS content: marker renders nothing at all in mPDF. */
.resume-atrium table.cv-bullet {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.resume-atrium td.cv-bullet-mk {
    width: 14px;
    padding: 0;
    vertical-align: top;
    color: #111827;
    font-size: 8px;
    line-height: 20px;           /* centers the square on the first 13px/1.5 text line */
}
.resume-atrium td.cv-bullet-tx {
    position: relative;
    padding: 0;
    vertical-align: top;
    font-size: 13px;
    color: #1f2937;
}

/* ---- key/value schedule (skills "domain / tools", languages "name / level")
 * ONE multi-row table per section, never a table per line: repeated small
 * tables inflate mPDF's own pagination height enough to cost a whole page
 * (confirmed on cobalt, 2026-07). Never chips either — consecutive
 * inline-blocks merge into one box in mPDF, and their padding is dropped
 * inside a cell. */
.resume-atrium table.cv-list {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 10px;
}
.resume-atrium td.cv-list-k {
    position: relative;
    width: 200px;
    padding: 0 14px 4px 0;
    vertical-align: top;
    font-size: 13px;
    font-weight: bold;
    color: #111827;
}
.resume-atrium td.cv-list-v {
    padding: 0 0 4px;
    vertical-align: top;
    font-size: 13px;
    color: #4b5563;
}
/* 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 — courant" exports as
   letterspaced small type. */
.resume-atrium .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-atrium .cv-dot-on {
    color: #111827;
}
.resume-atrium .cv-dot-off {
    color: #d1d5db;
}

/* =====================================================================
 * 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-atrium [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b8bfc9;
    font-style: italic;
    pointer-events: none;
}
.resume-atrium [contenteditable] {
    outline: none;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-atrium [contenteditable]:hover {
    box-shadow: 0 0 0 1px #d1d5db;
}
.resume-atrium [contenteditable]:focus {
    box-shadow: 0 0 0 2px #111827;
    background: #f3f4f6;
}
/* Edit-mode contact fields carry their own class rather than being selected
   through [contenteditable] (see the note above), and their spacing replaces
   the middots the pdf branch joins the filled fields with — an always-present
   empty slot must not print a separator beside it. */
.resume-atrium .cv-contact-f {
    display: inline-block;
    min-width: 40px;
    margin-right: 12px;
}

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

.resume-atrium .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 10px;
    padding: 4px 10px;
    border: 1px dashed #d1d5db;
    background: #ffffff;
    color: #111827;
    border-radius: 3px;
    cursor: pointer;
}
.resume-atrium .cv-add:hover {
    background: #f3f4f6;
    border-color: #111827;
}
.resume-atrium .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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

.resume-atrium .cv-dot-btn,
.resume-atrium .cv-level-toggle {
    font-family: inherit;
    border: none;
    background: none;
    padding: 0 1px;
    cursor: pointer;
    font-size: 10px;
}
.resume-atrium .cv-dot-btn.cv-dot-on {
    color: #111827;
}
.resume-atrium .cv-dot-btn.cv-dot-off {
    color: #d1d5db;
}
.resume-atrium .cv-level-toggle {
    font-size: 9px;
    color: #9ca3af;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-atrium .cv-list-v:hover .cv-level-toggle {
    opacity: 1;
}