/*
 * Couture template — fashion-editorial monochrome.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid: tables /
 * block layout only, so the two renderers agree.
 *
 * Palette discipline (template-specs/couture.yaml): strictly black and white.
 * #0a0a0a for everything that carries meaning, #4a4a4a and #8a8a8a as the only
 * two gray steps, and no accent color anywhere — settings.accentColor is
 * deliberately NOT painted on this page (tpl_dots is called without an accent
 * in couture.php for the same reason). Whitespace, tracking and hairline rules
 * do all the work colour would normally do.
 *
 * Vertical rhythm is expressed with margin-TOP only, never margin-bottom on a
 * repeated page-break-inside:avoid block: that double-counts in mPDF's
 * pagination-height estimate and can open a blank trailing page (skill §5).
 * Spacing therefore hangs off the section title (30px above every section) and
 * off each item (13px), unconditionally — no first/last override anywhere,
 * because an override reintroduces the same estimator bug inside nested avoid
 * blocks, and mPDF drops `+` sibling rules outright.
 */

/* ---- 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-couture {
    width: 794px;               /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    /* No bottom padding: on export it is real trailing space after the last
       line, and when content ends near the page boundary mPDF opens an extra
       page to place it. Nothing is visible below the last line anyway. */
    padding: 40px 60px 0;
    background: #ffffff;
    color: #0a0a0a;
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    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). The header block, every dated entry row and both
   two-column grids are tables here, so the font must be declared at td level
   too. No-op in the browser. */
.resume-couture td {
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #0a0a0a;
}

/* ---- masthead --------------------------------------------------------- */
.cv-name {
    font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: bold;          /* keyword only — mPDF ignores numeric weights */
    text-transform: uppercase;
    letter-spacing: 6px;
    line-height: 1.25;
    text-align: center;
    /* Wide tracking adds a trailing space after the last letter; the small
       left indent pulls the optical center back to the middle of the page. */
    text-indent: 6px;
    margin: 0;
    color: #0a0a0a;
}

/* The hairline under the name: a single-cell table, NOT a bordered div. A
   table cell background paints as one contiguous rect across the full cell
   width in both renderers, where a div's background behind text paints one
   small rect per rendered line (skill §5). The literal &nbsp; in the markup is
   there because mPDF drops a genuinely empty cell; the 1px font-size keeps
   that space from adding height of its own. */
table.cv-rule {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 18px;
}
table.cv-rule td {
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    padding: 0;
    background: #0a0a0a;
}

/* ---- header block (oversized square photo left, text right) -------------
 * No bottom margin on the table: the first section title's own 30px top margin
 * supplies the gap, so header->section and section->section are one value. */
.cv-header {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}
/* Fixed cell: 150px photo + a 26px gutter. The photo's size is the statement
   of this template, so the text column starts on a fixed grid line rather than
   wherever the image happens to end. */
.cv-head-photo {
    width: 176px;
    padding: 0 26px 0 0;
    vertical-align: top;
    line-height: 0;             /* kills the baseline gap under the <img> */
}
.cv-head-main {
    padding: 0;
    vertical-align: top;
}
.cv-photo,
.cv-photo-initials {
    display: inline-block;
}

/* Header text lives inside a <td>, where mPDF neither inherits the document
   font nor honors numeric weights — size/weight/color are declared explicitly
   on each element rather than left to inherit. */
.cv-jobtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3.4px;
    line-height: 1.4;
    color: #0a0a0a;
}

/* Summary and contact stacks are nested single-cell tables: a nested table's
   margin-top is the one reliable vertical-gap primitive inside a cell (mPDF
   drops block margins/padding there). */
table.cv-head-sum {
    width: 100%;
    border-collapse: collapse;
    margin: 11px 0 0;
}
.resume-couture .cv-head-sum td {
    padding: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #1f1f1f;
}
.cv-summary {
    text-align: left;           /* never justify — mPDF spacing artifacts */
}

/* Contact: one row per detail, plain text. No glyphs anywhere in this
   template (template-specs/couture.yaml) — tpl_icon() is never called. */
table.cv-contact {
    border-collapse: collapse;
    margin: 12px 0 0;
}
.resume-couture .cv-contact-cell {
    padding: 0 0 1px;
    font-size: 11.5px;
    line-height: 1.35;
    letter-spacing: 0.6px;
    color: #4a4a4a;
}

/* ---- sections (tracked caps between two hairline rules) -----------------
 * The 30px that separates sections lives on the title, the one element every
 * section starts with in both modes. Unconditional, so mPDF honors it and no
 * first-section override is needed. */
.cv-section-title {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #0a0a0a;
    border-top: 1px solid #0a0a0a;
    border-bottom: 1px solid #0a0a0a;
    padding: 5px 0;
    margin: 17px 0 0;
    page-break-after: avoid;
}
/* page-break-after:avoid on the title alone is not reliable in mPDF — pair it
 * with a page-break-inside:avoid group wrapping the title and its first entry.
 * This template is multipage:false (the builder shows its overflow warning
 * past one page), so these rules are hygiene rather than load-bearing. */
.cv-section-head-group {
    page-break-inside: avoid;
}

/* ---- items -------------------------------------------------------------
 * Two-cell "content left / date right" table (mPDF-safe, no float). The side
 * cell is a fixed 130px in every dated section — experience, education,
 * certifications and custom — so every date on the page lands on one vertical
 * grid line.
 */
.cv-item {
    position: relative;
    margin-top: 9px;
    page-break-inside: avoid;
}
/* mPDF doesn't reliably honor :last-child for margin purposes, so the server
 * marks whichever section/item renders last with this plain class instead
 * (couture.php). Unscoped on purpose — it applies to whichever element carries
 * it. Nothing here sets a bottom margin, so it's a safety net. */
/* DO NOT raise this selector's specificity. It ties .cv-section /
   .cv-inline-item at (0,1,0) and wins only on source order — but scoping it to
   .resume-X, or class-doubling it, also makes it override the margin on
   page-break-inside:avoid entries, which reintroduces the blank trailing page
   it exists to prevent (measured on classic, metric, ledger, sapphire,
   curriculum, host; skill §5 avoid-estimator trap). */
.is-last {
    margin-bottom: 0;
}

.cv-row {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.cv-row td {
    vertical-align: top;
    padding: 0;
}
.cv-row-main {
    text-align: left;
}
.resume-couture .cv-row-side {
    width: 130px;
    text-align: right;
    white-space: nowrap;
    color: #4a4a4a;
    font-size: 12px;
}
.cv-item-title {
    font-weight: bold;
}
/* The editorial signature: the organisation set in serif italic against the
   sans-serif position. Both faces are pinned to DejaVu so mPDF embeds the real
   italic rather than substituting a Condensed face. */
.cv-item-org {
    font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 13px;
    color: #0a0a0a;
}
.cv-item-sep {
    color: #8a8a8a;
}
.cv-item-field {
    color: #4a4a4a;
}
.cv-item-loc {
    color: #8a8a8a;
    font-size: 11px;
}
.cv-dates {
    color: #4a4a4a;
    letter-spacing: 0.4px;
}
.cv-item-details {
    margin-top: 3px;
    color: #4a4a4a;
}

/* Bullets: list-style is off and the em-dash marker is a real HTML span in the
   markup (CSS generated content never renders in mPDF). The hanging indent
   comes from padding-left + negative text-indent, which both renderers agree
   on for a list outside a table cell. */
.cv-bullets {
    list-style: none;
    margin: 6px 0 0;
    padding-left: 0;
}
.cv-bullets li {
    position: relative;
    padding-left: 18px;
    text-indent: -18px;
    margin-bottom: 2px;
}
.cv-bullet-mk {
    color: #8a8a8a;
}

/* ---- skills / languages two-column grid (pdf mode) -------------------- */
.cv-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 10px;
}
.resume-couture .cv-grid-col {
    width: 50%;
    vertical-align: top;
    padding: 0 16px 3px 0;
    font-size: 13px;
}
.cv-lang-name {
    font-weight: bold;
}
.cv-lang-level {
    color: #4a4a4a;
}
.cv-inline-item {
    position: relative;
    page-break-inside: avoid;
}
.cv-muted {
    color: #8a8a8a;
}

/* Skill/language level dots (tpl_dots), rendered monochrome — this page
   carries no accent color at all. */
.cv-level {
    font-size: 10px;
    letter-spacing: 1px;
    margin-left: 4px;
}
.cv-dot-on {
    color: #0a0a0a;
}
.cv-dot-off {
    color: #d4d4d4;
}

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

.cv-taglist {
    line-height: 2;
}
.cv-tag {
    position: relative;
    display: inline-block;
    margin: 0 7px 4px 0;
    padding: 2px 8px;
    background: #f4f4f4;
}

.resume-couture [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b7b7b7;
    font-style: italic;
    pointer-events: none;
}
.resume-couture [contenteditable] {
    outline: none;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-couture [contenteditable]:hover {
    box-shadow: 0 0 0 1px #dcdcdc;
}
.resume-couture [contenteditable]:focus {
    box-shadow: 0 0 0 2px #0a0a0a;
    background: #f7f7f7;
}
.resume-couture .cv-contact-cell [contenteditable] {
    display: inline-block;
    min-width: 120px;
}

.resume-couture .edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.resume-couture .edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
.resume-couture .cv-item:hover > .edit-controls,
.resume-couture .cv-inline-item:hover > .edit-controls,
.resume-couture .cv-bullets li:hover > .edit-controls,
.resume-couture .edit-controls:hover {
    opacity: 1;
}
.resume-couture .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;
    cursor: pointer;
}
.resume-couture .edit-controls button:hover {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #fff;
}

.resume-couture .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 7px;
    padding: 4px 10px;
    border: 1px dashed #c9c9c9;
    background: #fff;
    color: #0a0a0a;
    cursor: pointer;
}
.resume-couture .cv-add:hover {
    background: #f4f4f4;
    border-color: #0a0a0a;
}
.resume-couture .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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

.resume-couture .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-couture .cv-tag:hover .cv-tag-x {
    opacity: 1;
}

/* Level dot editor (skills/languages) */
.resume-couture .cv-level {
    white-space: nowrap;
}
.resume-couture .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-couture .cv-dot-btn.cv-dot-on {
    color: #0a0a0a;
}
.resume-couture .cv-dot-btn.cv-dot-off {
    color: #d4d4d4;
}
.resume-couture .cv-level-toggle {
    font-family: inherit;
    font-size: 9px;
    line-height: 1;
    padding: 1px 3px;
    margin-left: 3px;
    border: 1px solid #ccc;
    background: #fff;
    color: #777;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-couture .cv-tag:hover .cv-level-toggle,
.resume-couture .cv-inline-item:hover .cv-level-toggle {
    opacity: 1;
}
.resume-couture .cv-level-text {
    display: inline-block;
    min-width: 20px;
}

/* Edit-mode language rows need their own spacing (pdf mode uses the grid). */
.resume-couture .cv-inline-item {
    margin-top: 5px;
}
/* Edit mode only: the "School , Field" comma sits on its own source line, so
   the HTML newline before it renders as a leading space. pdf mode emits the
   comma glued to the school text instead (couture.php), and this pulls the
   edit view back into line with it. Never seen by mPDF. */
.resume-couture .cv-sep-comma {
    margin-left: -4px;
}