/* Live CV preview paper (.editor-resume) and its eight templates.
   The paper pins its own fonts and colours: it must look identical in every
   UI theme and language, because it previews what the export produces. */

.editor-resume {
  --serif: "DM Serif Display", Georgia, serif;
  --forest: #225d46;
  background: #fffefb; box-shadow: 0 19px 32px rgba(35, 56, 41, .16); color: #1b2921; font-family: "Manrope", Inter, "Segoe UI", sans-serif; letter-spacing: 0; line-height: normal;
  margin: 0 auto; min-height: 650px; padding: 37px 39px; position: relative; width: min(100%, 430px);
}
.editor-resume[data-template="form"] { border-left: 20px solid #cfbb8b; padding-left: 28px; }
.editor-resume[data-template="mark"] { padding-top: 68px; }
.editor-resume[data-template="mark"]::before { background: #527e9e; content: ""; height: 33px; left: 0; position: absolute; right: 0; top: 0; }
.editor-resume[data-template="frame"] { border: 12px solid #e4ebe2; outline: 1px solid #c2d1c4; outline-offset: -22px; }
.editor-resume[data-template="field"] { background: #fffdf8; border-top: 8px solid #d6bb83; }
.editor-resume[data-template="ats"] { background: #fff; border: 1px solid #1f2a23; box-shadow: none; color: #111; font-family: Arial, Helvetica, sans-serif; padding: 30px 32px; }
.editor-resume[data-template="ats"] .editor-resume-top { color: #111; letter-spacing: .08em; }
.editor-resume[data-template="ats"] h2 { color: #111; font-family: Arial, Helvetica, sans-serif; font-size: 29px; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-top: 18px; }
.editor-resume[data-template="ats"] .editor-role, .editor-resume[data-template="ats"] .editor-contact, .editor-resume[data-template="ats"] section p, .editor-resume[data-template="ats"] .editor-job span, .editor-resume[data-template="ats"] .editor-job time { color: #333; }
.editor-resume[data-template="ats"] .editor-rule { background: #111; margin: 17px 0 14px; }
.editor-resume[data-template="ats"] section { margin-top: 17px; }
.editor-resume[data-template="ats"] section h3 { color: #111; font-size: 9px; letter-spacing: .08em; }
.editor-resume[data-template="ats"] .preview-experience-item + .preview-experience-item { border-color: #d2d2d2; margin-top: 12px; padding-top: 12px; }
.editor-resume[data-template="ats"] .editor-job strong { color: #111; }
.editor-resume-top { color: #5b7666; display: flex; font-size: 8px; font-weight: 800; justify-content: space-between; letter-spacing: .12em; }
.editor-resume h2 { font-family: var(--serif); font-size: 36px; font-weight: 400; letter-spacing: -.07em; line-height: .9; margin: 23px 0 6px; word-break: break-word; }
.editor-role { color: #46554d; font-size: 11px; font-weight: 700; margin: 0; }
.editor-contact { color: #7b887f; font-size: 9px; line-height: 1.5; margin: 7px 0 0; word-break: break-word; }
.editor-rule { background: #dfe6df; height: 1px; margin: 25px 0 18px; }
.editor-resume section { margin-top: 22px; }
.editor-resume section h3 { color: var(--forest); font-size: 8px; font-weight: 800; letter-spacing: .13em; margin: 0 0 9px; text-transform: uppercase; }
.editor-resume section p { color: #57655c; font-size: 10px; line-height: 1.65; margin: 0; white-space: pre-line; word-break: break-word; }
.editor-job { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 7px; }
.editor-job strong { color: #26362d; display: block; font-size: 11px; }
.editor-job span { color: #68786e; display: block; font-size: 9px; margin-top: 2px; }
.editor-job time { color: #748278; font-size: 9px; margin-left: 10px; text-align: right; }
.preview-experience-item + .preview-experience-item { border-top: 1px solid #e3e9e3; margin-top: 15px; padding-top: 15px; }

@media (max-width: 1000px) { .editor-resume { padding-left: 31px; padding-right: 31px; } }
@media (max-width: 600px) {
  .editor-resume { min-height: 570px; padding: 29px 25px; }
  .editor-resume h2 { font-size: 31px; }
}

html[dir="rtl"] .editor-job, html[dir="rtl"] .editor-resume .editor-role, html[dir="rtl"] .editor-resume .editor-contact { text-align: right; }
.editor-resume[data-template="naskh"] { direction: rtl; text-align: right; font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, Arial, sans-serif; }
.editor-resume[data-template="dual"] { font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, Arial, sans-serif; }
.editor-resume[dir="rtl"] { direction: rtl; text-align: right; }
.editor-resume[dir="rtl"] section h3 { letter-spacing: 0; }

/* The editor's red pen on the live proof (screen only; hidden in print). */
.editor-resume .bs-pen-mark { background: none; color: inherit; outline: 1.5px solid #c42a1e; outline-offset: 1px; border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%; }
.editor-resume .bs-pen-mark::after, .editor-resume .bs-pen-block::before { content: attr(data-pen-n); color: #c42a1e; font: 700 8px/1 "DM Sans", sans-serif; vertical-align: super; margin-inline-start: 2px; }
.editor-resume .bs-pen-block { box-shadow: inset 2px 0 0 #c42a1e; padding-inline-start: 6px; }
.editor-resume .bs-pen-block::before { margin-inline: 0 4px; }

/* Template mockups (gallery + templates page): small paper illustrations. */
.document-surface { --serif: "DM Serif Display", Georgia, serif; --forest: #225d46; background: #fffefb; box-shadow: 0 16px 26px rgba(37, 49, 39, .13); height: 206px; overflow: hidden; padding: 24px 22px; position: relative; width: 151px; direction: ltr; }
.document-quiet { transform: rotate(-2deg); }
.document-form { display: flex; padding: 0; transform: rotate(2deg); }
.document-mark { transform: rotate(-1.4deg); }
.document-frame { transform: rotate(2deg); }
.document-field { transform: rotate(-2deg); }
.document-ats { border-top: 4px solid #202820; box-shadow: 0 11px 20px rgba(35, 43, 35, .12); padding: 19px 18px; transform: rotate(1deg); }
.document-ats .doc-title { background: #151b16; height: 11px; margin-top: 0; width: 77px; }
.document-ats .doc-subtitle { background: #636b63; width: 66px; }
.document-ats .doc-label { background: #222; height: 3px; }
.document-ats .doc-lines i { background: #d5d8d5; }
.ats-document-head { border-bottom: 1px solid #202820; padding-bottom: 11px; }
.document-ats .doc-rule { display: none; }
.doc-kicker { background: #7b9982; height: 4px; width: 29px; }
.doc-title { background: #263d2e; height: 13px; margin-top: 11px; width: 66px; }
.doc-subtitle { background: #aebbae; height: 4px; margin-top: 6px; width: 58px; }
.doc-rule { background: #e0e6e0; height: 1px; margin: 16px 0 11px; }
.doc-label { background: #4d7160; height: 4px; margin: 12px 0 6px; width: 31px; }
.doc-lines i { background: #d8e0d9; display: block; height: 3px; margin: 4px 0; width: 100%; }
.doc-lines i:nth-child(2) { width: 75%; }
.doc-lines i:nth-child(3) { width: 88%; }
.doc-job { background: #52665a; height: 5px; margin-bottom: 7px; width: 53px; }
.form-rail { background: #cfbb8b; flex: 0 0 31px; padding-top: 24px; }
.form-rail i { background: #f4eddd; display: block; height: 3px; margin: 8px auto; width: 13px; }
.form-document-main { flex: 1; padding: 24px 17px; }
.mark-band { background: #527e9e; height: 35px; left: 0; position: absolute; top: 0; width: 100%; }
.document-mark .doc-title { margin-top: 37px; }
.frame-head { align-items: center; display: flex; justify-content: space-between; }
.frame-head .doc-title { margin-top: 0; }
.frame-head span { align-items: center; background: #d9e5d8; border-radius: 50%; color: var(--forest); display: inline-flex; font-family: "Manrope", sans-serif; font-size: 8px; font-weight: 800; height: 22px; justify-content: center; width: 22px; }
.field-title { color: #233c2b; font-family: var(--serif); font-size: 18px; letter-spacing: -.07em; line-height: .85; }
.field-chip { background: #d9c396; height: 14px; margin-top: 13px; width: 51px; }
.document-surface.document-naskh { direction: rtl; font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; }
.document-surface.document-naskh .doc-title-ar { color: #225d46; font-size: 15px; font-weight: 700; }
.document-surface.document-dual .doc-title-ar { color: #6b7a6e; font-size: 9px; }

/* Ready-to-Apply Pack: CV and cover-letter previews. */
.pack-resume-document, .pack-letter-document { --serif: "DM Serif Display", Georgia, serif; --forest: #225d46; background: #fffefb; box-shadow: 0 14px 25px rgba(36, 51, 40, .12); color: #24332a; font-family: "Manrope", "Segoe UI", sans-serif; letter-spacing: 0; line-height: normal; margin: 0 auto; min-height: 665px; padding: 38px 36px; width: min(100%, 480px); }
.pack-resume-document[data-style="quiet"] { border-top: 7px solid #215f49; padding-top: 31px; }
.pack-resume-document[data-style="ats"] { border-top: 3px solid #26352b; font-family: Arial, Helvetica, sans-serif; padding-top: 33px; }
.pack-resume-document header { border-bottom: 1px solid #dce4dc; padding-bottom: 18px; }
.pack-resume-document[data-style="ats"] header { border-color: #28372e; }
.pack-resume-kicker, .pack-letter-kicker { color: #63806c; display: block; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.pack-resume-document[data-style="ats"] .pack-resume-kicker { color: #303a33; }
.pack-resume-document h1, .pack-letter-document h1 { font-family: var(--serif); font-size: 37px; font-weight: 400; letter-spacing: -.07em; line-height: .88; margin: 16px 0 6px; overflow-wrap: anywhere; }
.pack-resume-document[data-style="ats"] h1 { font-family: Arial, Helvetica, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.pack-resume-role { color: #4e6657; font-size: 11px; font-weight: 800; margin: 0; }
.pack-resume-document[data-style="ats"] .pack-resume-role { color: #28372e; }
.pack-resume-contact { color: #718077; font-size: 9px; line-height: 1.55; margin: 8px 0 0; overflow-wrap: anywhere; }
.pack-resume-document section { margin-top: 20px; }
.pack-resume-document section > h2 { color: var(--forest); font-size: 8px; font-weight: 800; letter-spacing: .12em; margin: 0 0 9px; text-transform: uppercase; }
.pack-resume-document[data-style="ats"] section > h2 { color: #1f2923; font-size: 9px; }
.pack-resume-document section > p { color: #5d6e62; font-size: 10px; line-height: 1.6; margin: 0; white-space: pre-line; }
.pack-resume-entry + .pack-resume-entry { border-top: 1px solid #e3e9e3; margin-top: 13px; padding-top: 13px; }
.pack-resume-entry > div { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }
.pack-resume-entry strong { color: #304438; display: block; font-size: 10px; }
.pack-resume-entry span { color: #708076; display: block; font-size: 9px; margin-top: 2px; }
.pack-resume-entry time { color: #7c887f; font-size: 8px; text-align: right; }
.pack-resume-entry > p { color: #5b6b60; font-size: 9px; line-height: 1.55; margin: 6px 0 0; white-space: pre-line; }
.pack-letter-document { padding: 40px 36px; }
.pack-letter-document header { border-bottom: 1px solid #e2e3dc; padding-bottom: 18px; }
.pack-letter-document header > p { color: #786e56; font-size: 10px; margin: 7px 0 0; }
.pack-letter-document .pack-letter-contact { color: #7c8278; font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; }
.pack-letter-copy { color: #3b493f; font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.75; margin: 25px 0 0; white-space: pre-wrap; }
.pack-letter-placeholder { color: #7c8479; font-size: 12px; line-height: 1.6; margin: 0; padding-top: 50%; text-align: center; }
@media (max-width: 600px) { .pack-resume-document, .pack-letter-document { min-height: 0; padding: 31px 25px; } }

@media print {
  body.apply-page { background: #fff; }
  body.apply-page * { visibility: hidden; }
  body.apply-page[data-print-pack="cv"] .pack-print-cv, body.apply-page[data-print-pack="cv"] .pack-print-cv * { visibility: visible; }
  body.apply-page[data-print-pack="letter"] .pack-print-letter, body.apply-page[data-print-pack="letter"] .pack-print-letter * { visibility: visible; }
  body.apply-page[data-print-pack="cv"] .pack-print-cv, body.apply-page[data-print-pack="letter"] .pack-print-letter { box-shadow: none; left: 0; margin: 0; min-height: 0; padding: 0; position: absolute; top: 0; width: 100%; }
  body.apply-page[data-print-pack="cv"] .pack-resume-document section, body.apply-page[data-print-pack="cv"] .pack-resume-entry, body.apply-page[data-print-pack="letter"] .pack-letter-document { break-inside: avoid; page-break-inside: avoid; }
}

@media print {
  body.builder-page { background: #fff; }
  body.builder-page * { visibility: hidden; }
  body.builder-page .builder-preview-wrap, body.builder-page .editor-resume, body.builder-page .editor-resume * { visibility: visible; }
  body.builder-page .builder-preview-wrap { background: #fff; display: block; left: 0; padding: 0; position: absolute; top: 0; width: 100%; }
  /* The saved CV is intentionally a clean document: no template frame, brand, or preview decoration. */
  body.builder-page .editor-resume { background: #fff; border: 0 !important; box-shadow: none; box-sizing: border-box; margin: 0; min-height: 0; outline: 0 !important; padding: 0; width: 100%; }
  body.builder-page .editor-resume::before { display: none !important; }
  body.builder-page .editor-resume-top { display: none !important; }
  body.builder-page .editor-resume h2 { margin-top: 0 !important; }
  body.builder-page .editor-resume .bs-pen-mark, body.builder-page .editor-resume .bs-pen-block { outline: 0 !important; box-shadow: none !important; padding-inline-start: 0 !important; }
  body.builder-page .editor-resume .bs-pen-mark::after, body.builder-page .editor-resume .bs-pen-block::before { content: none !important; }
}