/*
 * Monospace template — code-editor aesthetic, light background.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid:
 * floats / tables / block layout only, so the two renderers agree.
 *
 * Layout is plain block flow: the header, then one <div class="cv-main"> per
 * rendered section. The 28px gutter is an @page background band (§7a.2) so it
 * repeats on every sheet, and each section's tick is a single-cell table
 * pulled back over the band with a negative margin.
 *
 * Font stack: 'DejaVu Sans Mono' FIRST. mPDF resolves this stack to the
 * embedded DejaVuSansMono.ttf it bundles regardless of order — but the browser
 * does not, and with Courier leading it rendered the canvas in Courier New
 * while the export came out in DejaVu Sans Mono. Two different typefaces for
 * the same document, with nothing in the declared stack to show it (measured
 * by parity-audit's font_family detector: 12 of 12 mono runs differed).
 * Courier/monospace stay behind it as a no-fonts-loaded fallback only.
 *
 * mPDF font-inheritance pitfall (found building this template): font-family
 * set on an ancestor <div> does NOT reliably cascade into a descendant
 * <table>'s cells — mPDF silently falls back to its hardcoded default (a
 * serif) for all text inside the table instead. Every remaining table here
 * (.cv-row, .cv-skills-table, .cv-tick) therefore restates the font at td
 * level rather than relying on the wrapper.
 */

/* ---- 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;
    /* The 28px code-editor gutter, as a repeating page background (§7a.2), so
       it runs the full height of EVERY sheet. It used to be a <td> in a
       per-section table; a cell only exists where its row does, so pages 2+
       lost the gutter the moment content flowed past page 1. The hairline down
       its inner edge is baked into the PNG for the same reason.
       The URL must stay basepath-relative: PdfService calls SetBasePath(public/)
       and a root-relative /assets/... silently renders the band white. */
    background: url('assets/img/templates/bands/monospace.png');
    background-image-resize: 6;
}
@page :first {
    margin-top: 0;
}

/* No `background` here: a wrapper background paints over the @page band for
   the whole extent of the flowed content, and the band then shows only in the
   blank tail of the last page (§7a.2). The sheet colour comes from the band
   PNG. .cv-layout--edit paints the same band with a gradient for the browser,
   where @page is print-only. */
.resume-page.resume-monospace {
    width: 794px;              /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
}
.cv-layout--edit {
    background-image: linear-gradient(to right,
        #f8fafc 0, #f8fafc 27px, #e2e8f0 27px, #e2e8f0 28px, #ffffff 28px);
}

/* Base type. Declared on the page wrapper now that the body is block flow;
   every nested table restates it at td level (mPDF does not inherit into
   cells). */
.resume-monospace {
    color: #1f2430;
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ---- main column --------------------------------------------------------
 * margin-left clears the 28px @page band; the padding is the section's own
 * inset. This padding used to lose a specificity fight with a
 * `.cv-page > tbody > tr > td { padding: 0 }` rule (0,1,3 against 0,1,0):
 * Chrome obeyed specificity and computed it as 0, while mPDF took the later
 * rule and painted the padding — ~40px of export-only height per section,
 * about +150px over a page, which is what pushed Certifications onto a page 2
 * the builder never reported. Both the table and that rule are gone. */
.cv-main {
    margin-left: 28px;
    padding: 20px 40px 20px 32px;
}

/* Per-section tick in the gutter. A single-cell table with a coloured <td>,
   NOT a styled div: mPDF drops a content-less decorative div outright (§5),
   while a table-cell background is the rectangle primitive it paints
   reliably. margin-left pulls it back across .cv-main's padding and margin
   so it lands on the band, at the exact top of the section. */
.cv-tick {
    width: 28px;
    margin: 0 0 0 -60px;
    border-collapse: collapse;
}
.cv-tick td {
    width: 28px;
    height: 1px;
    padding: 0;
    font-size: 1px;
    line-height: 1px;
    background: #94a3b8;
}
/* Class-doubled, not bare .cv-main--header: a bare modifier ties .cv-main at
   (0,1,0) and only source order decides it, which Chrome and mPDF do not
   reliably resolve the same way (skill §5). */
.cv-main.cv-main--header {
    padding-top: 36px;
}

/* ---- header -------------------------------------------------------------- */
.cv-name {
    font-family: 'DejaVu Sans Mono', Courier, monospace;
    font-size: 23px;
    font-weight: bold;
    margin: 0 0 4px;
    line-height: 1.2;
    color: #1f2430;
}
.cv-jobtitle {
    font-size: 14px;
    font-weight: normal;
    color: #2563eb;
    margin-bottom: 8px;
}
.cv-contact {
    font-size: 12.5px;
    color: #6b7280;
}
.cv-contact span {
    margin-right: 10px;
}
.cv-link {
    color: #2563eb;
}

/* ---- sections -------------------------------------------------------- */
.cv-section {
    margin: 0;
}
.cv-section-title {
    font-family: 'DejaVu Sans Mono', Courier, monospace;
    font-size: 13px;
    font-weight: bold;
    text-transform: lowercase;
    letter-spacing: 0.3px;
    color: #1f2430;
    margin: 0 0 10px;
    page-break-after: avoid;
}
/* page-break-after:avoid on the title alone is not reliable in mPDF — a
 * header can still land as the last line on a page with its first entry
 * pushed to the next one. Wrapping the title together with its first entry
 * in a page-break-inside:avoid group moves the pair to the next page as a
 * unit. */
.cv-section-head-group {
    page-break-inside: avoid;
}
.cv-title-prefix {
    color: #94a3b8;
}
.cv-summary {
    text-align: left;
}

/* ---- items ------------------------------------------------------------- */
.cv-item {
    position: relative;
    page-break-inside: avoid;
}
/* Inter-item spacing is margin-TOP on a class monospace.php adds to every entry
 * but the first in its section, never margin-bottom on .cv-item itself
 * (cvg-template skill §5): margin-bottom on a page-break-inside:avoid block
 * repeated many times double-counts in mPDF's own pagination-height estimate
 * and can open an entire extra, genuinely blank page (confirmed on this exact
 * template via scripts/boundary-test.php — 2 pages for content that only needs
 * 1). An entry without the class simply has no top margin, so nothing ever
 * carries a competing override, which is what the skill's warning is about.
 *
 * It is a CLASS and not the `+` sibling combinator the skill suggests, because
 * mPDF ignores that combinator outright — measured by raising such a rule to
 * 100px and watching the export not move a single pixel. With a combinator the
 * canvas got the spacing and the export glued the entries together. */
.cv-item--gap {
    margin-top: 14px;
}
.cv-inline-item--gap {
    margin-top: 5px;
}
/* mPDF doesn't honor :last-child for margin purposes (cvg-template skill
 * §5). Now that inter-item spacing is margin-top (above), the last item
 * needs no special handling — but .is-last (server-added, see the
 * *LastIdx/*LastKey computations in monospace.php) is kept as a defensive
 * no-op in case margin-bottom is ever reintroduced on one of these classes. */
/* 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;
}

/* Two-column "title left / dates right" via table (mPDF-safe). */
.cv-row {
    width: 100%;
    border-collapse: collapse;
}
/* Font is restated at td level, not left to inherit: these cells are nested
   inside .cv-main's own td, and mPDF does not inherit font-family/size into a
   table cell (skill §5). Without this the certification line drops to the
   document default serif — conspicuous in a template whose whole identity is
   the mono/sans face. No-op in the browser. */
.cv-row td {
    vertical-align: top;
    padding: 0;
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1f2430;
}
.cv-row-main {
    text-align: left;
}
.resume-monospace .cv-row-side {
    text-align: right;
    white-space: nowrap;
    width: 30%;
    color: #6b7280;
    font-size: 12.5px;
}
.cv-item-title {
    font-weight: bold;
}
.cv-item-org {
    color: #059669;
    font-weight: bold;
}
.cv-item-sep {
    color: #9ca3af;
    font-weight: normal;
}
.cv-item-loc {
    color: #6b7280;
}
.cv-dates {
    font-family: 'DejaVu Sans Mono', Courier, monospace;
    font-weight: bold;
    color: #4b5563;
}
.cv-item-details {
    margin-top: 3px;
    color: #374151;
}

/* Bullets */
.cv-bullets {
    margin: 6px 0 0;
    padding-left: 18px;
}
.cv-bullets li {
    margin-bottom: 3px;
    position: relative;
}

/* ---- skills: mono "key: value" lines, two-column float list -------------
 * mPDF's float-wrap math needs genuine slack below half the container
 * width to reliably split into two columns (see compact.css). Main column
 * content width here is 794 - 28(gutter) - 40 - 32 = 694px; 300px + 24px
 * margin = 324px per column, 648px for both, well under 694px. */
.cv-skills-cols {
    overflow: hidden; /* browser-only clearfix; .cv-clear handles mPDF */
}
.cv-skill-col-item {
    position: relative;
    float: left;
    width: 300px;
    margin-right: 24px;
    margin-bottom: 5px;
    font-family: 'DejaVu Sans Mono', Courier, monospace;
    font-size: 12.5px;
}
.cv-skill-key {
    color: #1f2430;
}
.cv-skill-colon {
    color: #9ca3af;
}
.cv-skill-value {
    color: #2563eb;
}

/* pdf mode only: a real table grid instead of the float grid above — mPDF
 * doesn't pack repeated float:left columns into rows (cvg-template skill
 * §5), so the float version above would silently collapse to one column
 * per row, doubling the section's real height. */
.cv-skills-table {
    width: 100%;
    border-collapse: collapse;
}
.cv-skills-table td {
    vertical-align: top;
    padding: 0 24px 5px 0;
    font-family: 'DejaVu Sans Mono', Courier, monospace;
    font-size: 12.5px;
}
.cv-clear {
    clear: both;
}

/* Languages / certifications */
.cv-inline-item {
    position: relative;
    page-break-inside: avoid;
}
.cv-item-side {
    float: right;
    color: #6b7280;
    font-size: 12.5px;
    font-family: 'DejaVu Sans Mono', Courier, monospace;
}
.cv-muted {
    color: #9ca3af;
}

/* =====================================================================
 * Edit-mode affordances (browser only — these elements are never
 * emitted in pdf mode, so none of this reaches mPDF).
 * ===================================================================== */

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

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

.cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #bfdbfe;
    background: #fff;
    color: #2563eb;
    border-radius: 4px;
    cursor: pointer;
}
.cv-add:hover {
    background: #eff6ff;
    border-color: #2563eb;
}
.cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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