/*
 * Funnel template — ad-copy header, campaign-card experience.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid:
 * floats / tables / block layout only, so the two renderers agree.
 */

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

.resume-page {
    width: 794px;              /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    /* Bottom padding is 0 on purpose (the pulse rule): wrapper bottom padding
       is real trailing space in the flow, so content ending near the boundary
       makes mPDF open a further page and paint nothing on it — measured here
       as a completely blank page 2 on the FR sample. The bottom gap on every
       page comes from @page's margin-bottom (48px, above) instead, which does
       not add to the flow. */
    padding: 48px 56px 0;
    background: #ffffff;
    color: #1f2430;
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13px;
    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 (in-td trap class,
   2026-07 slate rework). This template's row/column/band layout uses tables,
   so the font must be declared at td level too. No-op in the browser. */
.resume-funnel td {
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #1f2430;
}


/* ---- header (ad-copy: eyebrow / headline / subhead) --------------------- */
.cv-header {
    text-align: center;
}
.cv-jobtitle {
    font-size: 11.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6b7280;
    margin-bottom: 6px;
}
.cv-name {
    font-size: 30px;
    font-weight: bold;
    margin: 0 0 8px;
    line-height: 1.15;
    color: #1f2430;
}
/* Fixed side margins, NOT `max-width: 80%; margin: 0 auto`. mPDF ignores
   max-width outright — proved by rendering this rule at 20% and at 80% and
   getting byte-identical exports — so the export set this paragraph across the
   full 682px content width while the browser held it to 545.6px, wrapping one
   line fewer and putting the first section heading 42px higher than the canvas.
   68px each side reproduces the old 80% exactly (682 - 2*68 = 546) and block
   side margins ARE honoured by mPDF (verified: a 200px value moved the heading
   from y=348.6 to y=487.8). */
.cv-header .cv-summary {
    font-size: 16px;
    color: #4b5563;
    margin: 0 68px 10px;
    text-align: center;
}
.cv-contact {
    font-size: 11.5px;
    color: #6b7280;
}
.cv-contact span {
    margin: 0 5px;
}

/* Thin accent rule under the header block. */
.cv-rule {
    height: 2px;
    width: 100%;
    background: #2563eb; /* overridden inline per-resume accentColor */
    margin: 16px 0 14px;
}

/* Skills — centered inline pill row directly under the header rule. */
.cv-pills {
    text-align: center;
    line-height: 2;
    margin-bottom: 18px;
}
/* No VERTICAL padding or margin here, and the row's height must come from
   .cv-pills' line-height instead. mPDF ignores padding and margin on an
   inline-block outright — proved by rendering this rule at `padding: 30px 12px`
   and at `margin: 0 5px 60px` and getting byte-identical exports — so the
   browser was reserving 37.4px per pill row where the export used 26.0px, and
   the gap grew with every extra row of skills. Height now comes from the
   line-height plus the 1px borders, which both renderers honour, so the rows
   agree.

   No horizontal padding or radius either, for the same reason and a second,
   independent confirmation: mPDF's own table-cell renderer never applies
   border-radius at all — verified directly against the raw PDF content
   stream (a <td> with `border-radius: 30px` painted as one plain `re f`
   rectangle, no curve operators, at any radius) — and slate.css's own
   `.cv-pill td` chip already documents the identical square-in-mPDF result
   for the ONE fleet pattern that gets padding to survive inside a table cell.
   There is no construction, table-based or otherwise, that renders a rounded
   corner in mPDF. Keeping `border-radius: 999px` + `padding: 0 12px` here
   made every export a square, unpadded chip (border tight against the text)
   under a browser canvas showing a padded pill — browser-round/PDF-square,
   exactly the divergence this file's own contract forbids. Both properties
   are removed so the canvas converges on what the export has always actually
   done, rather than the reverse (which is not achievable at all).

   NO MARGIN EITHER, and that is the whole box model of this element: mPDF
   ignores margin on an inline-block just as completely as padding. Measured
   2026-09 with an exaggerated value, which is the only way to tell an ignored
   property from a small one: two bordered inline-block spans sat at exactly
   the same x-delta (30.44px) whether the rule said `margin: 0`, `margin: 0
   5px` or `margin: 0 50px` — zero contribution at any value. Keeping
   `margin: 0 5px` therefore bought the browser 10px of inter-pill spacing
   the export never had, which is the same browser-vs-PDF divergence this
   comment already forbids one paragraph up, just in the horizontal axis.
   The gap between pills now comes from ONE thing in both renderers: the
   literal space character between adjacent `</span><span>` tags in
   funnel.php. Do not reintroduce margin or padding here to "tidy up" the
   spacing — it will move the canvas only, and silently. */
.cv-pill {
    display: inline-block;
    border: 1px solid #2563eb; /* overridden inline per-resume accentColor */
    color: #1f2430;
    font-size: 12px;
}
.cv-pills-add {
    text-align: center;
    margin-bottom: 18px;
}

/* ---- sections ------------------------------------------------------------ */
.cv-section {
    margin-bottom: 16px;
}
.cv-section-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px;
    color: #1f2430;
    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;
}

/* Campaign cards — bordered box per experience entry. */
.cv-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 12px;
    page-break-inside: avoid; /* keep card intact across mPDF page breaks */
}
/* Was `.cv-card { margin-bottom: 14px }` + `.cv-card:last-child { margin-bottom: 0 }`.
   The first card of each section is the last child of .cv-section-head-group,
   so Chrome zeroed its margin and glued card 1 to card 2 while mPDF, which
   ignores :last-child, kept the 14px — and margin-bottom on a repeated
   page-break-inside:avoid block double-counts in mPDF's pagination estimate
   (skill §5). A server-added class on every card but the first fixes both, and
   is not the `+` sibling combinator, which mPDF ignores. */
.cv-card--gap {
    margin-top: 14px;
}

.cv-row {
    width: 100%;
    border-collapse: collapse;
}
.cv-row td {
    vertical-align: top;
    padding: 0;
}
.cv-row-main {
    text-align: left;
}
.resume-funnel .cv-row-side {
    text-align: right;
    white-space: nowrap;
    width: 30%;
    color: #6b7280;
    font-size: 12px;
}
.cv-item-title {
    font-weight: bold;
    color: #1f2430;
}
.cv-item-org {
    font-weight: bold;
    color: #1f2430;
}
.cv-item-sep {
    font-weight: normal;
    color: #6b7280;
}
.cv-item-loc {
    color: #6b7280;
    font-size: 12px;
}
.cv-dates {
    font-weight: bold;
    color: #6b7280;
}

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

/* ---- footer strip: education / languages / certifications --------------- */
.cv-footer {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 6px;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}
.resume-funnel .cv-footer-cell {
    width: 33.33%;
    vertical-align: top;
    padding: 12px 10px 0;
    font-size: 11px;
    color: #374151;
}
.cv-footer-title {
    font-size: 10.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
    margin: 0 0 6px;
}
.cv-footer-item {
    position: relative;
    margin-bottom: 6px;
    page-break-inside: avoid;
}
.cv-footer-item:last-child {
    margin-bottom: 0;
}
.cv-footer-item .cv-item-title {
    font-size: 11px;
}
.cv-footer-item .cv-item-org {
    font-weight: normal;
    font-size: 11px;
}
.cv-footer-dates {
    color: #9ca3af;
    font-size: 10.5px;
}
.cv-muted {
    color: #9ca3af;
}

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

[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 #d6e2ff;
}
[contenteditable]:focus {
    box-shadow: 0 0 0 2px #2563eb;
    background: #f5f9ff;
}
.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;
}
.edit-controls--footer {
    position: absolute;
    top: -2px;
    right: 0;
}
.cv-card:hover > .edit-controls,
.cv-footer-item:hover > .edit-controls--footer,
.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 #b7c4e0;
    background: #fff;
    color: #2563eb;
    border-radius: 4px;
    cursor: pointer;
}
.cv-add:hover {
    background: #f5f9ff;
    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;
}

.cv-pill {
    position: relative;
}
.cv-pill-x {
    font-family: inherit;
    border: none;
    background: none;
    color: #b00;
    cursor: pointer;
    padding: 0 0 0 4px;
    opacity: 0;
    font-size: 13px;
}
.cv-pill:hover .cv-pill-x {
    opacity: 1;
}