/*
 * Opale template — dark full-height RIGHT sidebar, timeline main column.
 * Mirror-image of Onyx (sidebar on the right, not the left). Shared by browser
 * (edit) and mPDF (pdf). No flexbox, no CSS grid: the two columns are a floated
 * sidebar (32%) + a margin-right main column (68%), so the two renderers agree
 * AND the layout can paginate (a two-cell table could not — see .cv-layout).
 */

/* ---- 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. */
/* The dark rail. An @page background covers the FULL sheet — it ignores the
   page margins above and is repainted per page — so the band reaches the very
   bottom of every page including the last, which the old fixed-height <td>
   background could never do beyond page 1.
   The URL is basepath-relative because PdfService calls SetBasePath(public/):
   a root-relative '/assets/...' silently resolves to nothing and the band
   renders white. Regenerate with scripts/generate-band-assets.php — never
   hand-edit it; the band x-position must stay in lockstep with .cv-sidebar's
   width below. */
@page {
    margin: 40px 0 40px 0;
    background: url('assets/img/templates/bands/opale.png');
    background-image-resize: 6;
}
@page :first {
    margin-top: 0;
}

/* Edit mode only: @page is print-only, so the builder canvas would show white
   behind the sidebar's light text. Paints the identical band for the browser,
   full-height whatever the canvas grows to; never emitted in pdf mode
   (opale.php adds the class only when $edit). Band is on the RIGHT here. */
.cv-layout--edit {
    background-image: linear-gradient(to right, #ffffff 0, #ffffff 68%, #0f172a 68%);
}

.resume-page.resume-opale {
    width: 794px;               /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    /* Deliberately NO background: a background on this wrapper paints over the
       @page band for the whole extent of the flowed content, hiding the rail
       everywhere except the blank tail of the last page. The sheet colour comes
       from the band PNG (white outside the band) in pdf mode, and from
       .cv-layout--edit's gradient in edit mode. */
    color: #1e293b;
    font-family: 'DejaVu Sans', Helvetica, Arial, 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 (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-opale td {
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #1e293b;
}


/* ---- two-column layout: float, NOT a table ----------------------------
 * This was a two-cell single-row <table> so the sidebar <td> could carry a
 * fixed height + background and paint the rail down the whole page. That shape
 * cannot paginate: mPDF only breaks a table between <tr> boundaries, so a lone
 * row has none, and a resume too long for one page was silently font-shrunk to
 * fit rather than flowed onto page 2. A float has no such constraint, and the
 * rail's colour now comes from the @page band above. */
.cv-layout {
    width: 100%;
}
.cv-layout:after {
    content: "";
    display: table;
    clear: both;
}
/* Each cell rule is self-sufficient (vertical-align on the td itself): a
   `> tr > td` child combinator never matches in the browser (it inserts
   <tbody>), and without vertical-align:top mPDF centers the shorter column
   vertically in the full-height row (td default is middle). */

/* ---- main column (left, 68%) -------------------------------------------
 * margin-right (not a width) keeps the column clear of the floated sidebar on
 * page 1 AND holds the same indent on pages 2+, where the float no longer
 * exists but the @page band still paints under that strip. */
.cv-main {
    margin-right: 32%;
    padding: 40px 32px 40px 40px;
}

.cv-header {
    margin-bottom: 18px;
}
.cv-name {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.15;
    margin: 0 0 4px;
    color: #0f172a;
}
.cv-jobtitle {
    font-size: 16px;
    font-weight: bold;
}

/* pdf-mode section title rows: a heading's border-bottom shrinks to its text
   width and its margins are dropped inside a <td> in mPDF — the single-cell
   table's td carries both. The uniform margin-top doubles as the inter-section
   gap (.cv-section margins don't survive in mPDF; edit mode never renders
   .cv-title-row, so the browser is unaffected). */
.cv-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 10px;
}
.cv-title-row td {
    border-bottom: 1px solid #cbd5e1;
    padding: 0 0 5px;
}
.cv-title-row .cv-section-title {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.cv-section {
    margin-bottom: 20px;
}
.cv-section-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #0f172a;
    border-bottom: 1px solid #cbd5e1;
    margin: 0 0 10px;
    padding: 0 0 5px;
}
.cv-summary {
    text-align: left;
}

/* ---- timeline (experience / education) ---------------------------------
 * A 2px #e2e8f0 rule down the left edge of the entries wrapper, with a real
 * in-flow accent square glyph (.cv-tl-mk) at the start of each entry title.
 * A per-entry absolute-positioned marker overlapping the rule was avoided on
 * purpose: mPDF silently drops empty absolute-positioned <span>s (confirmed on
 * onyx via raw PDF content-stream inspection), so the marker MUST be a real
 * character in the text flow — which it is. */
/* Edit-mode wrapper only. The rail itself lives on each .cv-item below, so
   this no longer draws a border — a single wrapper around every entry is what
   used to force the un-paginatable one-row table in pdf mode. */
.cv-timeline {
    margin-left: 4px;
}
.cv-tl-mk {
    font-size: 8px;
    /* color is set inline with the live accent (see opale.php $tlMarker) */
}
/* The timeline rail. Carried per entry rather than by a wrapper so each entry
   stays an independent block mPDF can page-break between, and so the section
   heading can sit in the same avoid-group as the first entry. Spacing between
   entries is padding-top, NOT margin-bottom: padding sits inside the border box
   so the rail stays unbroken from one entry to the next, and it sidesteps the
   documented mPDF bug where margin-bottom on a many-times-repeated
   page-break-inside:avoid block is double-counted and opens a blank page. */
.cv-item {
    position: relative;
    border-left: 2px solid #e2e8f0;
    margin-left: 4px;
    padding-left: 20px;
    padding-top: 14px;
    page-break-inside: avoid;
}
/* mPDF ignores page-break-after:avoid on a heading by itself, so the heading
   and the first entry travel as one block instead. */
.cv-section-head-group {
    page-break-inside: avoid;
}
.cv-item-cell {
    position: relative;
    padding: 0;
}

/* Two-column "title left / dates right" via table (mPDF-safe). */
.cv-row {
    width: 100%;
    border-collapse: collapse;
}
.cv-row td {
    vertical-align: top;
    padding: 0;
}
.cv-row-main {
    text-align: left;
}
.resume-opale .cv-row-side {
    text-align: right;
    white-space: nowrap;
    width: 32%;
    color: #64748b;
    font-size: 12px;
}
.cv-item-title {
    font-weight: bold;
    color: #0f172a;
}
.cv-item-org {
    font-style: italic;
    color: #334155;
}
.cv-item-sep {
    color: #334155;
    font-style: normal;
}
.cv-item-field {
    color: #334155;
}
.cv-item-loc {
    font-style: italic;
}
.cv-dates {
    font-weight: bold;
}
.cv-item-details {
    margin-top: 3px;
}

/* Bullets (edit mode: real ul; pdf mode: one two-cell table per bullet —
   the fixed-width marker cell gives a hanging indent that survives mPDF
   inside the layout cell, li padding-left does not). */
.cv-bullets {
    margin: 5px 0 0;
    padding-left: 18px;
}
.cv-bullets li {
    margin-bottom: 2px;
    position: relative;
}
.cv-bullet {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3px;
}
.resume-opale .cv-bullet-mk {
    width: 16px;
    vertical-align: top;
    padding: 0;
    color: #94a3b8;
    font-size: 7px;
    line-height: 19px; /* centers the dot on the first 13.5px/1.45 text line */
}
.cv-bullet-tx {
    vertical-align: top;
    padding: 0;
}

/* Certifications (edit mode: ul + float date; pdf mode: two-cell table per
   cert — the float doesn't float inside the layout cell in mPDF). */
.cv-cert-list {
    margin: 0;
    padding-left: 18px;
}
.cv-cert-list li {
    position: relative;
    margin-bottom: 4px;
}
.cv-item-side {
    float: right;
    width: 70px;
    color: #64748b;
    font-size: 12px;
}
.cv-cert-row {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.cv-cert-row td {
    vertical-align: top;
    padding: 0;
}
.resume-opale .cv-cert-side {
    width: 70px;
    text-align: right;
    color: #64748b;
    font-size: 12px;
}
.cv-muted {
    color: #94a3b8;
}

/* ---- sidebar (right, 32%, dark, full page height) ----------------------
 * `height` (not `min-height`) is set directly on this <td> — mPDF ignores
 * height set on a nested block inside a cell for the cell's painted background
 * height, but DOES honor a CSS `height` on the <td> itself, extending the dark
 * fill to the full page (confirmed on onyx). mPDF still lets the cell grow
 * taller if content needs it — height is a paint floor, not a clip.
 * Two-page note: this whole page is one single-row <table>, and mPDF has no
 * row boundary to break at within a lone <tr>, so overlong content is
 * auto-shrunk to fit one page rather than flowing onto a second — which is
 * why the registry declares this a single-page (multipage => false) design. */
/* ---- sidebar (right, 32%, dark) ---------------------------------------
 * No background and no height here any more: both used to be what painted the
 * rail, and both are what forced the un-paginatable table. The colour is now
 * the @page band, which is independent of how far the content reaches, so the
 * rail is full-height on a 1-page and a 4-page export alike. */
.cv-sidebar {
    float: right;
    width: 32%;
    box-sizing: border-box;
    padding: 20px;
    color: #e2e8f0;
}
.cv-sidebar-inner {
    box-sizing: border-box;
}
/* Sidebar cell text: the generic `.resume-opale td` rule above would paint
   nested sidebar tables' cells near-black on the dark rail. */
.resume-opale .cv-sidebar td {
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.45;
}

/* Photo slot: single-cell table so the slot keeps its geometry inside the
   sidebar cell (block margins are dropped there); the section gap below it
   comes from .cv-side-title-row's uniform margin-top. */
.cv-photo-wrap {
    border-collapse: collapse;
    margin: 0 auto;
}
.cv-photo-wrap td {
    padding: 0;
    text-align: center;
}
.cv-photo,
.cv-photo-initials {
    display: block;
    margin: 0 auto;
}

/* Side sections: the inter-section gap is the title row's uniform margin-top
   (block margins on the .cv-side-section div are dropped inside the sidebar
   cell in mPDF; a nested table's margin renders in both). */
.cv-side-section {
    margin-bottom: 0;
}
.cv-side-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 10px;
}
.cv-side-title-row td {
    border-bottom: 1px solid rgba(226, 232, 240, 0.25);
    padding: 0 0 6px;
}
.cv-side-title {
    font-size: 11.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

/* Contact list: accent glyph + light text, 12px. In pdf mode each item is a
   single-cell table (block margins are dropped inside the sidebar cell);
   in edit mode it stays a div — the shared class carries the margin, which
   both renderers honor on their respective element. */
.cv-contact-list {
    font-size: 12px;
}
.cv-contact-item {
    color: #e2e8f0;
    margin-bottom: 7px;
    word-wrap: break-word;
}
table.cv-contact-item {
    width: 100%;
    border-collapse: collapse;
}
.cv-contact-item td {
    padding: 0;
}
/* Accent-colored contact glyphs (spec: "contact list, accent glyphs"). */
.resume-opale .cv-sidebar .cv-icon {
    display: inline-block;
    margin-right: 5px;
    color: #38bdf8;
}
.resume-opale .cv-sidebar .cv-icon.cv-icon-linkedin {
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 8px;
    font-weight: bold;
    color: #0f172a;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
}

/* Skills and languages moved OUT of the sidebar on 2026-08-05 (§7a.3): the
   sidebar is a float, and mPDF silently drops floated-column entries it will
   not carry onto the next page. Both now render in the main column as a real
   two-column table grid — mPDF does not pack repeated same-direction floats
   into rows (§5), so array_chunk + <table> is the only safe grid primitive.
   The old .cv-chip / .cv-side-def rail rules are gone with them. */
.cv-skill-grid {
    width: 100%;
    border-collapse: collapse;
}
.cv-skill-col {
    width: 50%;
    padding: 0 10px 5px 0;
    vertical-align: top;
    font-size: 12.5px;
    line-height: 1.45;
    color: #1e293b;
}
/* The odd trailing filler cell carries no content and must not add height. */
.cv-skill-col.cv-skill-col--empty {
    padding: 0;
}

/* Edit-mode tag list for the same two sections. Browser-only markup, so the
   inline-block/flex traps that govern pdf mode do not apply here. */
.cv-taglist {
    margin: 2px 0 0;
}
.cv-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.3;
    color: #1e293b;
}
.cv-tag-x {
    font-family: inherit;
    margin-left: 5px;
    border: none;
    background: none;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
}
.cv-tag:hover .cv-tag-x {
    opacity: 1;
}
/* Proficiency dots now sit in the WHITE main column, not on the dark rail, so
   the empty-dot colour has to read against white (#334155 was tuned for the
   navy sidebar and is nearly invisible here). Scoped to .resume-opale rather
   than left bare so it cannot leak into another template's canvas. */
.resume-opale .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-opale .cv-dot-off {
    color: #cbd5e1;
}

/* =====================================================================
 * 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;
}
.cv-sidebar [contenteditable][data-ph]:empty:before {
    color: rgba(226, 232, 240, 0.5);
}
[contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
[contenteditable]:hover {
    box-shadow: 0 0 0 1px #bae6fd;
}
[contenteditable]:focus {
    box-shadow: 0 0 0 2px #38bdf8;
    background: #f0f9ff;
}
.cv-sidebar [contenteditable]:hover {
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.5);
}
.cv-sidebar [contenteditable]:focus {
    box-shadow: 0 0 0 2px #38bdf8;
    background: rgba(56, 189, 248, 0.14);
}

/* skill/language level dot buttons (edit mode) */
.cv-level {
    white-space: nowrap;
}
.cv-dot-btn {
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    padding: 0 1px;
    border: none;
    background: none;
    cursor: pointer;
    color: #334155;
}
.cv-dot-btn.cv-dot-on {
    color: #38bdf8;
}
.cv-level-toggle {
    font-family: inherit;
    font-size: 10px;
    margin-left: 5px;
    padding: 0 4px;
    border: 1px solid rgba(226, 232, 240, 0.4);
    background: transparent;
    color: #e2e8f0;
    border-radius: 3px;
    cursor: pointer;
}
.cv-level-toggle:hover {
    border-color: #38bdf8;
    color: #38bdf8;
}

/* add / remove / reorder controls */
.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-sidebar .edit-controls--inline {
    left: auto;
    right: -20px;
}
.cv-item:hover > .edit-controls,
.cv-bullets li:hover > .edit-controls,
.cv-cert-list 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: #38bdf8;
    border-color: #38bdf8;
    color: #fff;
}

.cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #7dd3fc;
    background: #fff;
    color: #0284c7;
    border-radius: 4px;
    cursor: pointer;
}
.cv-add:hover {
    background: #f0f9ff;
    border-color: #38bdf8;
}
.cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}
.cv-add--side {
    border-color: rgba(226, 232, 240, 0.5);
    background: transparent;
    color: #e2e8f0;
}
.cv-add--side:hover {
    background: rgba(56, 189, 248, 0.14);
    border-color: #38bdf8;
}

.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;
}