/* ══════════════════════════════════════════════════════════════════════
   CV DOCUMENT — /all-workers/{id}
   A self-contained, print-ready CV sheet built on the Rafedeen palette.

   Everything is namespaced under `.rcv-` so none of the legacy
   `main.cvPage-container .cv-*` rules in style.css can reach it.

   Direction: the sheet is authored with logical properties, so text,
   padding and ornaments mirror automatically between ar (rtl) and
   en (ltr). The ONE deliberate exception is the photo sidebar, which
   stays on the physical LEFT in both directions (see .rcv-doc__body).
   To make it follow the reading direction instead, delete the two
   [dir="rtl"] grid-column rules there.
   ══════════════════════════════════════════════════════════════════════ */

.rcv-page {
    --rcv-indigo: #2f0b69;
    --rcv-indigo-deep: #1c063f;
    --rcv-violet: #7a46db;
    --rcv-violet-deep: #5324ac;
    --rcv-lav: #8d7da9;
    --rcv-lav-soft: #eeebf3;
    --rcv-wash: #f7f3ff;
    --rcv-gold: #e0a93c;
    --rcv-gold-soft: #fdf3e0;
    --rcv-ink: #1a1230;
    --rcv-ink-soft: #3b3352;
    --rcv-muted: #5d5175;
    --rcv-line: #e3dded;
    --rcv-paper: #ffffff;

    /* One knob for the whole sheet: page width drives logo + photo size. */
    --rcv-sheet: 920px;
    --rcv-pad: clamp(1.15rem, 0.6rem + 1.6vw, 2rem);

    padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
    background:
        radial-gradient(circle at 12% 0%, rgba(122, 70, 219, 0.07), transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(224, 169, 60, 0.06), transparent 38%),
        #faf9fc;
}

/* ─────────────────────────────────────────────
   TOOLBAR
   ───────────────────────────────────────────── */
.rcv-toolbar {
    width: min(var(--rcv-sheet), calc(100% - 2rem));
    margin-inline: auto;
    margin-block-end: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: relative;
    z-index: 3;
}

.rcv-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rcv-tool {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--rcv-line);
    border-radius: 14px;
    background: var(--rcv-paper);
    color: var(--rcv-violet-deep);
    font-size: 1.02rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(47, 11, 105, 0.07);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease,
        color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    text-decoration: none;
}

.rcv-tool:hover:not(.is-disabled) {
    transform: translateY(-3px);
    border-color: transparent;
    background: linear-gradient(135deg, var(--rcv-indigo), var(--rcv-violet));
    color: #fff;
    box-shadow: 0 10px 22px rgba(122, 70, 219, 0.28);
}

.rcv-tool:focus-visible {
    outline: 2px solid var(--rcv-violet);
    outline-offset: 3px;
}

.rcv-tool.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

.rcv-tool.is-busy {
    cursor: progress;
    opacity: 0.75;
}

/* ─────────────────────────────────────────────
   SHEET
   ───────────────────────────────────────────── */
.rcv-doc {
    width: min(var(--rcv-sheet), calc(100% - 2rem));
    margin-inline: auto;
    background: var(--rcv-paper);
    border: 1px solid var(--rcv-line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(47, 11, 105, 0.16), 0 8px 20px rgba(47, 11, 105, 0.07);
    color: var(--rcv-ink-soft);
    position: relative;
}

/* Uploaded source CV stays separate from the standardized document. */
.rcv-original {
    width: min(var(--rcv-sheet), calc(100% - 2rem));
    margin: 1.5rem auto 0;
    overflow: hidden;
    border: 1px solid var(--rcv-line);
    border-radius: 20px;
    background: var(--rcv-paper);
    box-shadow: 0 16px 38px rgba(47, 11, 105, 0.1);
}

.rcv-original__head {
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--rcv-line);
    background: var(--rcv-wash);
}

.rcv-original__eyebrow {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--rcv-violet);
    font-size: 0.7rem;
    font-weight: 800;
}

.rcv-original__head h2 {
    margin: 0;
    color: var(--rcv-indigo);
    font-size: 1rem;
    font-weight: 800;
}

.rcv-original__open {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--rcv-indigo), var(--rcv-violet));
    text-decoration: none;
}

.rcv-original__open:hover {
    color: #fff;
}

.rcv-original__viewer {
    min-height: 480px;
    padding: 1rem;
    display: grid;
    place-items: center;
    background: #eeebf3;
}

.rcv-original__viewer iframe {
    width: 100%;
    height: min(78vh, 850px);
    min-height: 620px;
    border: 0;
    border-radius: 12px;
    background: #fff;
}

.rcv-original__viewer a,
.rcv-original__viewer img {
    display: block;
    max-width: 100%;
}

.rcv-original__viewer img {
    max-height: 850px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(47, 11, 105, 0.13);
}

/* ── Letterhead ── */
.rcv-doc__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.1rem var(--rcv-pad);
    background: linear-gradient(135deg, var(--rcv-indigo-deep) 0%, var(--rcv-indigo) 48%, var(--rcv-violet-deep) 100%);
    color: #fff;
    overflow: hidden;
}

/* The girih field is a stroke-only svg, so it is used as a mask over a white
   wash — the same technique as .orn-tile in the design system. */
.rcv-doc__head::before,
.rcv-doc__foot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0.09;
    -webkit-mask: url("../images/patterns/geo-tile.svg") 0 0 / 110px 110px repeat;
    mask: url("../images/patterns/geo-tile.svg") 0 0 / 110px 110px repeat;
    pointer-events: none;
}

.rcv-doc__head > * {
    position: relative;
    z-index: 1;
}

.rcv-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Logo scales with the sheet, never with whatever the source file is. */
.rcv-brand__logo {
    width: auto;
    height: clamp(38px, 4.4vw, 52px);
    max-width: 180px;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
}

.rcv-brand__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rcv-brand__name {
    margin: 0;
    color: #fff;
    font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.12rem);
    font-weight: 800;
    line-height: 1.25;
}

.rcv-brand__meta {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] .rcv-brand__meta {
    text-align: right;
}

.rcv-head__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.rcv-head__badge {
    padding: 0.35rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.rcv-head__code {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.3rem 0.9rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
}

.rcv-head__code-lbl {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.rcv-head__code-val {
    color: var(--rcv-gold);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ─────────────────────────────────────────────
   BODY GRID
   ───────────────────────────────────────────── */
.rcv-doc__body {
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr);
    align-items: stretch;
}

/* Keep the photo column on the physical left in rtl too. Delete these
   two rules to let the sidebar follow the reading direction instead. */
[dir="rtl"] .rcv-doc__body {
    grid-template-columns: minmax(0, 1fr) 258px;
}

[dir="rtl"] .rcv-side {
    grid-column: 2;
    grid-row: 1;
}

[dir="rtl"] .rcv-main {
    grid-column: 1;
    grid-row: 1;
}

/* ── Sidebar ── */
.rcv-side {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    padding: 1.5rem 1.15rem 1.75rem;
    background: linear-gradient(180deg, var(--rcv-wash) 0%, #fff 78%);
    border-inline-end: 1px solid var(--rcv-line);
}

[dir="rtl"] .rcv-side {
    border-inline-end: 0;
    border-inline-start: 1px solid var(--rcv-line);
}

.rcv-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--rcv-lav-soft);
    box-shadow: 0 12px 28px rgba(47, 11, 105, 0.14);
}

.rcv-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(122, 70, 219, 0.18);
    pointer-events: none;
}

.rcv-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* When the only artwork is a PDF CV, its first page stands in for the photo. */
.rcv-photo--pdf {
    background: #fff;
}

.rcv-photo__pdf {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    pointer-events: none;
}

.rcv-photo__pdf-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    background: #fff;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.rcv-photo__pdf-canvas.is-ready {
    opacity: 1;
}

.rcv-identity {
    text-align: center;
}

.rcv-identity__name {
    margin: 0;
    color: var(--rcv-indigo);
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.rcv-identity__job {
    margin: 0.3rem 0 0;
    color: var(--rcv-violet-deep);
    font-size: 0.84rem;
    font-weight: 700;
}

/* `display: block` is load-bearing: this is a <span>, and width/height are
   ignored on an inline box — it collapsed to 0×0, so the divider never drew,
   and html2canvas threw "non-finite double" trying to paint a gradient
   across zero pixels, which broke the PDF export. */
.rcv-identity__rule {
    display: block;
    width: 54px;
    height: 3px;
    margin: 0.7rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rcv-violet), var(--rcv-gold));
}

.rcv-side__block + .rcv-side__block,
.rcv-identity + .rcv-side__block {
    padding-block-start: 1.15rem;
    border-block-start: 1px dashed var(--rcv-line);
}

.rcv-side__title {
    margin: 0 0 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--rcv-indigo);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rcv-side__title::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rcv-gold);
}

/* Facts */
.rcv-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    padding-block: 0.4rem;
    border-block-end: 1px solid rgba(122, 70, 219, 0.08);
}

.rcv-fact:last-child {
    border-block-end: 0;
}

.rcv-fact__label {
    color: var(--rcv-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.rcv-fact__value {
    color: var(--rcv-ink);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: end;
    overflow-wrap: anywhere;
}

/* Languages */
.rcv-lang + .rcv-lang {
    margin-block-start: 0.7rem;
}

.rcv-lang__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.3rem;
}

.rcv-lang__name {
    color: var(--rcv-ink);
    font-size: 0.8rem;
    font-weight: 700;
}

.rcv-lang__pct {
    color: var(--rcv-violet-deep);
    font-size: 0.75rem;
    font-weight: 800;
    direction: ltr;
    unicode-bidi: isolate;
}

.rcv-lang__track {
    height: 6px;
    border-radius: 999px;
    background: var(--rcv-lav-soft);
    overflow: hidden;
}

.rcv-lang__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--rcv-violet-deep), var(--rcv-violet));
}

.rcv-languages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.rcv-languages .rcv-lang {
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--rcv-line);
    border-radius: 12px;
    background: var(--rcv-wash);
}

.rcv-languages .rcv-lang + .rcv-lang {
    margin-block-start: 0;
}

/* QR */
.rcv-qr {
    text-align: center;
}

.rcv-qr__frame {
    width: 132px;
    height: 132px;
    margin: 0 auto;
    padding: 8px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rcv-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(47, 11, 105, 0.08);
}

.rcv-qr__frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.rcv-qr__hint {
    margin: 0.55rem 0 0;
    color: var(--rcv-muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────
   MAIN COLUMN
   ───────────────────────────────────────────── */
.rcv-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem var(--rcv-pad) 1.9rem;
    min-width: 0;
}

.rcv-section__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 0.85rem;
}

.rcv-section__title {
    margin: 0;
    color: var(--rcv-indigo);
    font-size: 0.98rem;
    font-weight: 800;
    white-space: nowrap;
}

.rcv-section__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to var(--rcv-rule-dir, left), var(--rcv-line), transparent);
}

[dir="ltr"] .rcv-section__rule {
    --rcv-rule-dir: right;
}

/* Personal data grid */
.rcv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
}

.rcv-cell {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--rcv-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rcv-cell:hover {
    transform: translateY(-2px);
    border-color: rgba(122, 70, 219, 0.35);
    box-shadow: 0 6px 16px rgba(122, 70, 219, 0.1);
}

.rcv-cell__label {
    color: var(--rcv-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.rcv-cell__value {
    margin-block-start: 2px;
    color: var(--rcv-ink);
    font-size: 0.88rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* Cost cards */
.rcv-costs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.7rem;
}

.rcv-cost {
    position: relative;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--rcv-indigo) 0%, var(--rcv-violet-deep) 100%);
    color: #fff;
    overflow: hidden;
}

.rcv-cost::after {
    content: "";
    position: absolute;
    inset-block-start: -30px;
    inset-inline-end: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 169, 60, 0.28) 0%, transparent 70%);
}

.rcv-cost:nth-child(2) {
    background: linear-gradient(135deg, var(--rcv-violet-deep) 0%, var(--rcv-violet) 100%);
}

.rcv-cost:nth-child(3) {
    background: linear-gradient(135deg, #5d5175 0%, var(--rcv-lav) 100%);
}

.rcv-cost__label {
    position: relative;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 700;
}

.rcv-cost__value {
    position: relative;
    margin-block-start: 3px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
}

/* Skills */
.rcv-skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 0.55rem;
}

.rcv-skill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(122, 70, 219, 0.16);
    border-radius: 999px;
    background: var(--rcv-wash);
    color: var(--rcv-ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.rcv-skill__tick {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rcv-gold-soft);
    color: #b8791a;
    font-size: 0.66rem;
}

/* Experience table */
.rcv-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rcv-line);
    border-radius: 14px;
}

.rcv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.rcv-table th {
    padding: 0.6rem 0.85rem;
    background: var(--rcv-wash);
    color: var(--rcv-indigo);
    font-weight: 800;
    font-size: 0.78rem;
    text-align: start;
    white-space: nowrap;
}

.rcv-table td {
    padding: 0.6rem 0.85rem;
    color: var(--rcv-ink-soft);
    text-align: start;
    border-block-start: 1px solid var(--rcv-line);
}

.rcv-table tbody tr:hover td {
    background: rgba(122, 70, 219, 0.04);
}

.rcv-table td.is-empty {
    text-align: center;
    color: var(--rcv-muted);
}

/* Notes */
.rcv-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rcv-note {
    padding: 0.4rem 0.9rem;
    border: 1px dashed rgba(224, 169, 60, 0.5);
    border-radius: 999px;
    background: var(--rcv-gold-soft);
    color: #8a5c11;
    font-size: 0.8rem;
    font-weight: 700;
}

.rcv-empty {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--rcv-line);
    border-radius: 12px;
    background: #fcfbfe;
    color: var(--rcv-muted);
    font-size: 0.82rem;
}

/* ─────────────────────────────────────────────
   FOOTER — company identity + contacts
   ───────────────────────────────────────────── */
.rcv-doc__foot {
    position: relative;
    padding: 1.15rem var(--rcv-pad);
    background: linear-gradient(135deg, var(--rcv-indigo-deep) 0%, var(--rcv-indigo) 60%, var(--rcv-violet-deep) 100%);
    color: rgba(255, 255, 255, 0.82);
    overflow: hidden;
}

.rcv-foot__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.rcv-foot__brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.rcv-foot__logo {
    width: auto;
    height: 40px;
    max-width: 150px;
    object-fit: contain;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    flex-shrink: 0;
}

.rcv-foot__name {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.3;
}

.rcv-foot__tag {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.74rem;
    font-weight: 600;
}

.rcv-foot__contacts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rcv-foot__contacts li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 600;
}

.rcv-foot__contacts a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rcv-foot__contacts a:hover {
    color: var(--rcv-gold);
}

.rcv-foot__contacts i {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--rcv-gold);
    font-size: 0.74rem;
}

.rcv-foot__contacts .rcv-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.rcv-foot__legal {
    position: relative;
    z-index: 1;
    margin: 0.9rem 0 0;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 600;
}

.rcv-foot__legal .rcv-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media screen and (max-width: 820px) {
    .rcv-doc__body,
    [dir="rtl"] .rcv-doc__body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Photo column first on small screens, whatever the direction. */
    [dir="rtl"] .rcv-side,
    [dir="rtl"] .rcv-main {
        grid-column: 1;
        grid-row: auto;
    }

    .rcv-side,
    [dir="rtl"] .rcv-side {
        border-inline: 0;
        border-block-end: 1px solid var(--rcv-line);
    }

    .rcv-side {
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 1rem 1.35rem;
        align-items: start;
    }

    /* Same promise as the desktop layout: the photo stays on the left. */
    [dir="rtl"] .rcv-side {
        grid-template-columns: minmax(0, 1fr) 190px;
    }

    .rcv-photo {
        grid-column: 1;
        grid-row: 1 / span 2;
        max-width: 190px;
    }

    [dir="rtl"] .rcv-photo {
        grid-column: 2;
    }

    .rcv-identity {
        text-align: start;
        align-self: end;
    }

    .rcv-identity__rule {
        margin-inline: 0;
    }

    .rcv-side__block + .rcv-side__block,
    .rcv-identity + .rcv-side__block {
        padding-block-start: 0;
        border-block-start: 0;
    }
}

@media screen and (max-width: 560px) {
    .rcv-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .rcv-photo {
        grid-row: auto;
        max-width: 220px;
        margin-inline: auto;
    }

    .rcv-identity {
        text-align: center;
    }

    .rcv-identity__rule {
        margin-inline: auto;
    }

    .rcv-languages {
        grid-template-columns: minmax(0, 1fr);
    }

    .rcv-doc__head,
    .rcv-doc__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .rcv-head__meta {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────
   EXPORT MODE — applied by the download button while html2canvas rasterises

   html2canvas is not a browser: it re-implements painting, and two things
   here are outside what it can do. Both are decorative, so they are simply
   flattened for the duration of the capture.
   ───────────────────────────────────────────── */

/* Gradients on hairlines: if a flex-sized rule ever computes to zero width,
   html2canvas divides by it and throws "non-finite double", failing the whole
   export. Solid colours cannot fail and read the same at 1–3px. */
.rcv-doc.is-exporting .rcv-identity__rule {
    background: var(--rcv-violet);
}

.rcv-doc.is-exporting .rcv-section__rule {
    background: var(--rcv-line);
}

/* `mask` is unsupported, so the girih layer would paint as a flat white
   veil over the letterhead and footer instead of a pattern. */
.rcv-doc.is-exporting .rcv-doc__head::before,
.rcv-doc.is-exporting .rcv-doc__foot::before {
    display: none;
}

.rcv-doc.is-exporting .rcv-photo__pdf {
    display: none;
}

.rcv-doc.is-exporting .rcv-photo__pdf-canvas.is-ready {
    display: block;
}

.rcv-doc.is-exporting .rcv-table th,
.rcv-doc.is-exporting .rcv-table td,
.rcv-doc.is-exporting .rcv-skill,
.rcv-doc.is-exporting .rcv-languages,
.rcv-doc.is-exporting .rcv-languages .rcv-lang,
.rcv-doc.is-exporting .rcv-empty {
    background: #fff !important;
}

/* ─────────────────────────────────────────────
   PRINT — the sheet IS the page

   Three things break a printed CV and all three are handled here:

   1. Width. The screen sheet is 920px; the A4 text column is ~718px. The
      responsive breakpoints above are scoped to `screen` on purpose, so
      print keeps the designed two-column layout instead of collapsing to
      the stacked mobile one. The sheet is then re-proportioned below.
   2. Clipping. `.rcv-doc`, `.public-page` and `<body>` all clip overflow
      on screen. An ancestor that clips cannot paginate — the second page
      comes out blank or sheared. Everything in the chain is reset to
      `overflow: visible`.
   3. Ink. Browsers drop backgrounds by default, which would erase the
      letterhead, the cost cards and the footer band.
   ───────────────────────────────────────────── */
@media print {
    @page {
        size: A4 portrait;
        margin: 9mm;
    }

    /* 2 — nothing between the paper and the sheet may clip or scroll. */
    html,
    body,
    .public-page,
    .cv-detail-page,
    .rcv-page {
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        overflow: visible !important;
        background: #fff !important;
    }

    .rcv-page {
        padding: 0;
    }

    /* Note: `body > header`, not `header` — .rcv-doc__head is a <header> too. */
    .rcv-toolbar,
    .breadcrumb,
    body > header,
    .site-footer,
    .whatsapp-float,
    .scroll-top-indicator,
    .booking-modal-overlay,
    .pg-loader {
        display: none !important;
    }

    /* 3 — keep every band, card and bar in colour. */
    .rcv-doc,
    .rcv-doc * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 1 — full paper width, no card chrome, and no clipping. */
    .rcv-doc {
        width: 100%;
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    /* Tighter gutters so the two columns still fit the narrower paper. */
    .rcv-doc {
        --rcv-pad: 10mm;
    }

    .rcv-doc__body {
        grid-template-columns: 52mm minmax(0, 1fr);
    }

    [dir="rtl"] .rcv-doc__body {
        grid-template-columns: minmax(0, 1fr) 52mm;
    }

    .rcv-side {
        gap: 4mm;
        padding: 5mm 4mm;
        background: var(--rcv-wash);
    }

    .rcv-main {
        gap: 5mm;
        padding: 5mm var(--rcv-pad) 6mm;
    }

    .rcv-doc__head,
    .rcv-doc__foot {
        padding-block: 4mm;
    }

    /* The girih mask is decorative and costs a lot of ink — drop it. */
    .rcv-doc__head::before,
    .rcv-doc__foot::before {
        display: none;
    }

    /* Scale the sheet down a step so a typical CV lands on one page. */
    .rcv-brand__logo {
        height: 12mm;
        max-width: 40mm;
    }

    .rcv-foot__logo {
        height: 10mm;
        max-width: 34mm;
    }

    .rcv-photo {
        box-shadow: none;
    }

    .rcv-identity__name {
        font-size: 1.05rem;
    }

    .rcv-section__title {
        font-size: 0.9rem;
    }

    .rcv-cell,
    .rcv-skill,
    .rcv-fact,
    .rcv-table {
        font-size: 0.78rem;
    }

    .rcv-cell:hover,
    .rcv-table tbody tr:hover td {
        transform: none;
        box-shadow: none;
        background: transparent;
    }

    .rcv-table th,
    .rcv-table td,
    .rcv-skill,
    .rcv-languages,
    .rcv-languages .rcv-lang,
    .rcv-empty {
        background: #fff !important;
    }

    .rcv-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rcv-costs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rcv-skills {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rcv-languages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Never split a row, a card or the letterhead across two sheets. */
    .rcv-doc__head,
    .rcv-doc__foot,
    .rcv-section,
    .rcv-cost,
    .rcv-cell,
    .rcv-skill,
    .rcv-lang,
    .rcv-qr,
    .rcv-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* The footer is the sign-off — it must not start a page on its own. */
    .rcv-doc__foot {
        break-before: avoid;
        page-break-before: avoid;
    }

    a[href]::after {
        content: none !important;
    }
}