/* Eveilo — LISTY MOTYWACYJNE.
   Ładowany OBOK cv.css (nie wchodzi do bundla cv:css — silnik szablonów
   nietknięty). Markup: letters/_paper (dyspozytor) -> letters/tpl/<slug>
   (projekt per szablon, te same klasy ról co CV) -> letters/_body (wspólna
   treść .cvl-*). Szablon bez własnego projektu dostaje fallback
   letters/tpl/_default (biała kartka na tokenach przez .cv-tpl-skin).

   ZASADA: projekty per szablon czytają kolory WYŁĄCZNIE z tokenów/klas ról
   szablonu — dzięki temu styl bazowy admina i kolory usera z powiązanego
   CV (CvStyle, reguły na .cv-doc) malują list dokładnie tak jak CV. */

/* ===== Wspólna baza kartki ===== */

.cv-doc.cv-letter {
    box-sizing: border-box;
    font-size: 13.5px;
    line-height: 1.75;
}

/* Miniatura na liście (bez .cv-paper) musi mieć proporcję A4. */
.tpl-thumb .cv-letter { min-height: 1122.5px; }

/* ===== Treść wspólna (.cvl-*) — neutralna, malowana tokenami ===== */

.cvl-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin: 0 0 26px;
}
.cvl-recipient { min-width: 40%; }
.cvl-recipient p { margin: 0; font-size: 13px; line-height: 1.6; }
.cvl-recipient p:first-child { font-weight: 650; color: var(--cv-role-color, #111827); }
/* podpowiedź w pustym adresacie NIE jest nazwą firmy — zostaje przygaszona
   (reguła pierwszego wiersza pogrubiała ją; .cv-letter w selektorze bije
   też remis z późniejszą neutralizacją kolorów .cvl-default) */
.cv-letter .cvl-recipient p:first-child.cvl-ph { font-weight: 400; color: #9aa1ac; }
.cvl-date {
    font-size: 12.5px;
    color: var(--cv-date-color, #6b7280);
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

/* Temat to nagłówek listu, nie jego pierwszy wiersz — odstęp pod nim musi być
   wyraźnie większy niż odstęp między akapitami (14px), inaczej zlewa się ze
   zwrotem grzecznościowym.

   GOTCHA SPECYFICZNOŚCI: bazowy reset cv.css `.cv-doc p { margin: 0 }`
   (klasa+element) WYGRYWA z samą klasą `.cvl-*` — marginesy akapitów listu
   deklarowane gołą klasą były po cichu zerowane (temat kleił się do
   powitania mimo trzech kolejnych podbić wartości). Dlatego KAŻDY margines
   na elemencie <p> listu musi iść selektorem `.cv-letter .cvl-*`
   (dwie klasy biją klasę+element). */
.cvl-subject {
    font-size: 14.5px;
    font-weight: 650;
    color: var(--cv-role-color, #111827);
}
/* 26px = dokładnie tyle, ile .cvl-meta ma POD sobą — temat siedzi w równych
   odstępach od bloku adresata powyżej i od powitania poniżej. */
.cv-letter .cvl-subject { margin: 0 0 26px; }
.cv-letter .cvl-greeting { margin: 0 0 14px; }
.cvl-block { margin: 0 0 14px; color: var(--cv-body-color, #374151); }
.cvl-greeting, .cvl-signoff { color: var(--cv-body-color, #374151); }

.cvl-sign { margin-top: 26px; break-inside: avoid; }
.cv-letter .cvl-signoff { margin: 0 0 10px; }
.cvl-signname { font-weight: 650; color: var(--cv-role-color, #111827); margin: 0; }

/* Linia kontaktu nadawcy (separatory „ · " z twardymi odstępami z blade).
   Margines prefiksowany .cv-letter — patrz GOTCHA SPECYFICZNOŚCI wyżej. */
.cvl-contact {
    font-size: 12px;
    color: var(--cv-date-color, #6b7280);
    white-space: pre-wrap;
}
.cv-letter .cvl-contact { margin: 9px 0 0; }

/* Przygaszone podpowiedzi w pustych polach (edytor i miniatury; PDF ich
   nie renderuje — puste sekcje w ogóle nie wchodzą do dokumentu). */
.cvl-ph { color: #9aa1ac; font-style: italic; font-weight: 400; }

/* ===== Afordancje edycji (tylko edytor: klasa .cvl-editable) ===== */

/* TA SAMA afordancja co w edytorze CV (prośba Marcina): fioletowa
   przerywana ramka z odsunięciem — lustro .cvedit-hover z app.css
   (radius 2px jak tam: przy liniach nagłówków niezauważalny).
   Elewacja jak w CV: outline maluje się w warstwie elementu, więc bez
   position+z-index sąsiedzi przykrywaliby kawałki ramki. */
.cvl-editable { cursor: pointer; }
.cvl-editable:hover,
.cvl-editable:focus-visible {
    outline: 2px dashed var(--c-primary, #7c3aed);
    /* ujemny offset = ramka wewnątrz pudełka, poza zasięgiem klipów
       przodków (lustro .cvedit-hover — uzasadnienie w app.css) */
    outline-offset: -3px;
    /* bez border-radius — jak w .cvedit-hover (nadpisanie animowało okrągłe
       zdjęcia do prostokąta przez transition promienia na .cv-photo) */
    position: relative;
    z-index: 55;
}

/* ===== Projekt uniwersalny (fallback .cvl-default) ===== */

.cv-letter.cvl-default {
    background: #fff;
    padding: 64px 72px;
    color: #374151;
}

/* Nośnik tokenów fallbacku: tło/odstępy/dekoracje roota szablonu nie
   wchodzą, typografia (font-family) i zmienne --cv-* zostają. */
.cvl-default .cv-tpl-skin {
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    color: #374151;
}
.cvl-default .cv-tpl-skin::before,
.cvl-default .cv-tpl-skin::after { content: none !important; }

/* Reguły „wierności" per szablon USUNIĘTE z fallbacku (06.08): wszystkie
   17 szkieletów ma już DEDYKOWANE listy (letters/tpl/*), więc fallback
   obsługuje wyłącznie przyszłe szablony bez własnego projektu. */

.cvl-default .cvl-head {
    padding-bottom: 18px;
    border-bottom: 2.5px solid var(--cv-accent, #4338ca);
    margin-bottom: 26px;
}
.cvl-default .cvl-name {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #111827;
    margin: 0;
}
.cvl-default .cvl-headline {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cv-accent, #4338ca);
    margin: 4px 0 0;
}
/* neutralne kolory treści fallbacku (tokeny ciemnych szablonów tu nie rządzą) */
.cvl-default .cvl-recipient p:first-child,
.cvl-default .cvl-subject,
.cvl-default .cvl-signname { color: #111827; }
.cvl-default .cvl-block,
.cvl-default .cvl-greeting,
.cvl-default .cvl-signoff { color: #374151; }
.cvl-default .cvl-date,
.cvl-default .cvl-contact { color: #6b7280; }

/* ===== SUNNY — nagłówek 1:1 z CV (blob, rozstrzelone nazwisko, pigułka) ===== */

.cv-letter.cv-sunny .cv-sunny-top { margin-bottom: 30px; }
.cv-letter.cv-sunny .cv-sunny-top.cvl-nophoto .cv-sunny-head { margin-left: 0; padding-top: 10px; }
.cv-letter.cv-sunny .cvl-contact { margin-top: 14px; }
.cv-letter.cv-sunny .cvl-date {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11.5px;
}
.cv-letter.cv-sunny .cvl-subject {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13.5px;
}

/* ===== NEON — krem, pigułki, kontakt w kółkach ===== */

.cv-letter.cv-neon { padding: 46px 44px; }
.cvl-neon-head {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}
/* zdjęcie mniejsze niż w kolumnie CV (list jest jednołamowy) */
.cv-letter.cv-neon .cv-photo {
    width: var(--cv-photo-w, 118px);
    aspect-ratio: 118 / 128;
    flex-shrink: 0;
    margin: 0;
}
.cvl-neon-contacts { margin-top: 14px; }
.cvl-neon-contacts li { margin-bottom: 7px; }
.cv-letter.cv-neon .cv-name { margin-bottom: 10px; }
/* data jak pigułka-zakreślacz (lustro .cv-period z neon.css) */
.cv-letter.cv-neon .cvl-date {
    display: inline-block;
    background: var(--cv-date-bg, var(--cv-accent));
    color: var(--cv-date-color, #1b1b19);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cv-letter.cv-neon .cvl-subject { font-weight: 800; font-size: 15.5px; }
.cv-letter.cv-neon .cvl-block,
.cv-letter.cv-neon .cvl-greeting,
.cv-letter.cv-neon .cvl-signoff { color: var(--cv-body-color, #4a4a42); }

/* ===== TECH — ciemna kartka, cyjan, konstelacja ===== */

.cv-letter.cv-tech {
    background: var(--cv-page-bg, var(--tech-main));
    min-height: 1122.5px;
    padding: 44px 48px;
}
.cvl-tech-head {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--cv-line-color, var(--tech-line));
    margin-bottom: 26px;
}
/* zdjęcie jak w CV (okrągłe, cyjanowa obwódka), tylko mniejsze i bez centrowania */
.cv-letter.cv-tech .cv-photo { width: var(--cv-photo-w, 108px); margin: 0; flex-shrink: 0; }
.cv-letter.cv-tech .cv-headline { margin-bottom: 0; }
.cv-letter.cv-tech .cvl-contact { color: var(--tech-soft); }
.cv-letter.cv-tech .cvl-recipient p { color: var(--cv-body-color, #c3d6dd); }
.cv-letter.cv-tech .cvl-recipient p:first-child { color: #fff; }
.cv-letter.cv-tech .cvl-subject { color: #fff; }
.cv-letter.cv-tech .cvl-signname { color: #fff; }
.cv-letter.cv-tech .cvl-date { color: var(--tech-soft); }
.cv-letter.cv-tech .cvl-block,
.cv-letter.cv-tech .cvl-greeting,
.cv-letter.cv-tech .cvl-signoff { color: var(--cv-body-color, #c3d6dd); }
.cv-letter.cv-tech .cvl-ph { color: #5b7580; }
/* (cyjanowy wariant hovera usunięty — ramka przerywana jak w CV jest
   czytelna także na granacie, ten sam fiolet co w edytorze CV na tech) */

/* Tryb stron: kartkę listu tech maluje W CAŁOŚCI page_content (płaski
   granat jak kolumna główna CV; konstelację dokłada cv-net), a ROOT nie
   maluje nic — jego tło kończyło się z treścią (min-height nie przeżywa
   paginacji) i poniżej prześwitywał jaśniejszy gradient pasa 34%
   (zgłoszenie Marcina: dwa tła na jednej kartce). Selektor z obiema
   klasami stron wygrywa specyficznością z regułą z tech.css. */
.pagedjs_page .cv-letter.cv-tech { background: none; min-height: 0; }
.cv-pages-letter.cv-pages-tech .pagedjs_page_content {
    background-image: none;
}

/* ===== EDITORIAL — żółte koło, szary pas jak papeteria ===== */

/* treść listu w białej kolumnie (70%); szary pas zostaje po prawej */
.cv-letter.cv-editorial { padding-bottom: 46px; }
.cv-letter.cv-editorial .cvl-content {
    margin-left: 46px;
    margin-right: calc(30% + 28px);
    padding-top: 24px;
    /* żółte koło (pozycjonowany ::before nagłówka, kontekst z-index:0)
       maluje się nad niepozycjonowaną treścią — a dół koła celowo schodzi
       pod kreskę. Treść listu zaczyna się dokładnie tam, więc wchodzi na
       własny kontekst PONAD koło (zgłoszenie Marcina: tło ma zły z-index). */
    position: relative;
    z-index: 1;
}
.cv-letter.cv-editorial .cv-editorial-top.cvl-nophoto .cv-editorial-id { padding-top: 24px; }
.cv-letter.cv-editorial .cvl-subject {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13.5px;
}
.cv-letter.cv-editorial .cvl-date {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11.5px;
}

/* ===== MONO — pasek, rozstrzelone nazwisko, dużo światła ===== */

/* treść w osi nazwiska (142px od lewej krawędzi treści) */
.cv-letter.cv-mono .cvl-content { margin-left: 142px; padding-top: 4px; }
.cv-letter.cv-mono .cvl-date {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}
.cv-letter.cv-mono .cvl-subject {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    font-weight: 600;
}

/* ===== SWISS — czerwony znacznik, wielkie imię, gruba linia ===== */

/* Pionowa linia-dzielnik kolumn CV (rysowana per strona na rootcie:
   .pagedjs_page .cv-swiss::before, z content:'' !important) NIE dotyczy
   listu — list nie ma kolumn. Wyższa specyficzność + !important gasi ją. */
.pagedjs_page .cv-letter.cv-swiss::before { content: none !important; }

/* ZASADA (Marcin 06.08): zdjęcie w liście widać TYLKO wtedy, gdy widać je
   w CV — o widoczności decyduje wyłącznie ta sama kaskada co w dokumencie
   (domyślna szablonu, np. swiss/bloom ukrywają + przełącznik panelu przez
   sections.photo). Dlatego tu ŻADNYCH display na .cv-photo. */
.cv-letter.cv-swiss .cvl-contact { margin-top: 12px; letter-spacing: 0.02em; }
.cv-letter.cv-swiss .cvl-date {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11.5px;
    color: #111;
}
.cv-letter.cv-swiss .cvl-subject { text-transform: uppercase; letter-spacing: 0.04em; }
.cv-letter.cv-swiss .cvl-recipient p:first-child { color: #111; }

/* ===== BLOOM — ciepłe tło, treść w miękkiej karcie, pigułki ===== */

/* widoczność zdjęcia = kaskada CV (patrz zasada przy sekcji SWISS) */
.cv-letter.cv-bloom .cvl-contact { margin-top: 12px; }

/* Tryb stron: ciepłe tło na CAŁEJ kartce maluje page_content (bloom nie ma
   własnej reguły stron w cv.css — CV polega na min-height roota, który
   w paginacji edytora umiera; list z krótką treścią pokazywał biały dół). */
.pagedjs_page .cv-letter.cv-bloom { background: none; min-height: 0; }
.cv-pages-letter.cv-pages-bloom .pagedjs_page_content {
    background: var(--cv-page-bg, #fffaf8);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* treść listu = jedna karta sekcji (język wizualny bloom); przy cięciu
   Paged.js przywracamy oddech jak w .cv-bloom-card */
.cv-letter.cv-bloom .cvl-content {
    background: var(--cv-section-bg, #fff2f4);
    border-radius: 20px;
    padding: 24px 24px 26px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cv-letter.cv-bloom .cvl-content[data-split-to]   { padding-bottom: 24px !important; }
.cv-letter.cv-bloom .cvl-content[data-split-from] { padding-top: 24px !important; }

/* data = miętowa pigułka (lustro .cv-period z bloom.css) */
.cv-letter.cv-bloom .cvl-date {
    display: inline-block;
    background: var(--cv-date-bg, #d5f5e8);
    color: var(--cv-date-color, #0f9d6b);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* temat = koralowy nagłówek z kropką (jak .cv-h2 w bloom) */
.cv-letter.cv-bloom .cvl-subject {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-weight: 800;
    color: var(--cv-head-color, #e05575);
}
.cv-letter.cv-bloom .cvl-subject::before {
    content: '';
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
    margin-top: calc(0.75em - 5.5px);
    margin-top: calc(0.5lh - 5.5px);
    border-radius: 50%;
    background: var(--cv-decor-color, #fb7185);
}
.cv-letter.cv-bloom .cvl-recipient p:first-child,
.cv-letter.cv-bloom .cvl-signname { color: var(--cv-role-color, #3b353f); }

/* ===== MODERN (Nowoczesny) — lawendowa kolumna jak w CV ===== */

/* W trybie stron kolumnę maluje WYŁĄCZNIE pas .cv-pages-modern/-pro (pełna
   wysokość kartki) — własne tła flexowych kolumn gasną, bo kończą się
   z treścią (min-height nie przeżywa paginacji) i zostawiały szew na
   granicy z pasem (wzorzec z tech.css). Poza stronami (miniatura, arkusz
   źródłowy) tła kolumn zostają — tam pasa nie ma. Pro dziedziczy ten sam
   mechanizm (flex 34% + pas). */
.pagedjs_page .cv-letter.cv-modern .cv-side,
.pagedjs_page .cv-letter.cv-modern .cv-main,
.pagedjs_page .cv-letter.cv-pro .cv-side,
.pagedjs_page .cv-letter.cv-pro .cv-main { background: none; }

/* ===== CLASSIC / PRO — oddech pod kreską nagłówka =====
   W CV odstęp pod linią robią sekcje (margin-top), których list nie ma:
   classic kończy nagłówek bez marginesu, pro daje ledwie 6px — adresat
   siadał na kresce (zgłoszenie Marcina). */
.cv-letter.cv-classic .cvl-content { padding-top: 26px; }
.cv-letter.cv-pro .cvl-content { padding-top: 20px; }

/* ===== SAGE / LEX — akademicko-kancelaryjne detale ===== */

/* sage: daty i belki bezszeryfowe (jak .cv-contact-line w CV) */
.cv-letter.cv-sage .cvl-date {
    font-family: 'Inter', var(--font-sans);
    font-size: 11.5px;
    letter-spacing: 0.04em;
}
.cv-letter.cv-lex .cvl-date { letter-spacing: 0.03em; }

/* ZASADA: treść listu NIGDY nie deklaruje własnego kroju.
   W żadnym z 17 szablonów CV `.cv-desc` nie ma font-family — treść wszędzie
   dziedziczy krój z korzenia `.cv-doc`, więc list musi robić dokładnie to samo,
   inaczej te same akapity mają w CV i w liście inny font. Lex miał tu jawnie
   wpisany `--lex-serif` (Cormorant), czyli krój, którym składa tytuł zawodowy
   i nazwy firm — treść listu wychodziła w kroju nagłówkowym. Kroje ról
   (imię, tytuł, treść) przenoszą się z CV same: kartka listu ma klasę
   `.cv-doc` i te same klasy ról, a `CvStyle` emituje na nie reguły. */

/* ===== AURORA — pas gradientu + treść w białej karcie ===== */

/* jak bloom: lawendowe tło całej kartki maluje page_content (root gaśnie
   w trybie stron — jego tło kończyło się z treścią) */
.pagedjs_page .cv-letter.cv-aurora { background: none; min-height: 0; }
.cv-pages-letter.cv-pages-aurora .pagedjs_page_content {
    background: var(--cv-page-bg, #f8f7fc);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.cv-letter.cv-aurora .cv-aurora-band .cvl-contact { color: rgba(255, 255, 255, 0.88); }
.cv-letter.cv-aurora .cvl-content {
    margin: 30px 44px 46px;
    background: var(--cv-section-bg, #ffffff);
    border: 1px solid var(--cv-line-color, #ece8f6);
    border-radius: 18px;
    padding: 26px 28px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cv-letter.cv-aurora .cvl-content[data-split-to]   { padding-bottom: 26px !important; }
.cv-letter.cv-aurora .cvl-content[data-split-from] { padding-top: 26px !important; }
/* data = fioletowa pigułka (jak pigułki dat aurory) */
.cv-letter.cv-aurora .cvl-date {
    display: inline-block;
    background: var(--cv-date-bg, #f3ecff);
    color: var(--cv-date-color, #7c3aed);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ===== BLUEPRINT / CANFIELD / TIMELINE / ONYX — drobne detale ===== */

/* blueprint: data w monospace jak etykiety rysunku technicznego */
.cv-letter.cv-blueprint .cvl-date {
    font-family: var(--bp-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.02em;
}
/* canfield: data rozstrzelona jak etykiety szyny */
.cv-letter.cv-canfield .cvl-date {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}
/* timeline/onyx: tokeny dat z szablonu wystarczają — bez nadpisań */

/* ===== Okna edycji (rama .cvedit-* wspólna; tu tylko pola listu) ===== */

.lted-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin: 12px 0 4px;
}
.lted-hint {
    font-size: 12.5px;
    color: #6b7280;
    margin: 0 0 8px;
}
.lted-field { width: 100%; }
textarea.lted-field { resize: vertical; min-height: 150px; line-height: 1.6; }

/* Dymek „Popraw z AI" (.lted-aitip) mieszka w app.css — używają go okna
   edycji CV i listów, a stronę CV letter.css nie obsługuje. */

/* Okno wyboru CV („z którego dokumentu list?"). */
.lted-picklist { display: flex; flex-direction: column; gap: 8px; }
.lted-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lted-pick:hover {
    border-color: #7c3aed;
    background-color: rgba(124, 58, 237, 0.04);
}
.lted-pick i { color: #7c3aed; }
.lted-pick-name { font-weight: 600; color: #111827; }
.lted-pick-meta { margin-left: auto; font-size: 12px; color: #6b7280; white-space: nowrap; }