/* ============================================================
   PDF export — print pipeline
   The live preview already renders fully-paginated 768px-wide
   sheets (.pg-sheet for the résumé, .cover for the letter), each
   in true Letter proportion (768:994 ≈ 8.5:11). On export we clone
   those exact nodes into #print-root and scale each to a full
   Letter page, so the PDF is pixel-identical to the on-screen design.
   ============================================================ */

#print-root { display: none; }

/* scale 768px design width up to 8.5in (816px @96dpi): 816/768 = 1.0625 */
:root { --print-scale: 1.0625; }

@media print {
  @page { size: letter; margin: 0; }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* hide the whole app, show only the print sheets */
  body > #root { display: none !important; }
  body > .tweaks-host,
  .toast,
  .export-modal-scrim { display: none !important; }

  #print-root { display: block !important; }

  .print-page {
    width: 8.5in;
    height: 11in;
    overflow: hidden;
    position: relative;
    background: #fff;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .print-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .print-scale {
    width: 768px;
    height: 994px;
    transform: scale(var(--print-scale));
    transform-origin: top left;
  }

  /* the cloned sheet should sit flush, no preview chrome */
  .print-scale > * {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* render accent rails, bands & dark templates at full fidelity */
  #print-root,
  #print-root * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ============================================================
   Export modal (shown before opening the print dialog)
   ============================================================ */
.export-modal-scrim {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in oklab, var(--ink-1, #15151a) 42%, transparent);
  backdrop-filter: blur(6px) saturate(1.1);
  animation: exp-fade 0.18s ease both;
}
@keyframes exp-fade { from { opacity: 0; } to { opacity: 1; } }

.export-modal {
  width: min(440px, 100%);
  background: var(--bg-0, #fff);
  border: 1px solid var(--line, #e7e7ee);
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.5), 0 8px 24px -10px rgba(0,0,0,0.25);
  padding: 22px 22px 20px;
  animation: exp-pop 0.2s cubic-bezier(0.2,0.9,0.3,1.2) both;
}
@keyframes exp-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

.export-modal-h {
  display: flex; align-items: center; gap: 11px; margin-bottom: 4px;
}
.export-modal-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--acc, #6d5cff), var(--acc-2, #ff5ca8));
}
.export-modal-h h3 {
  margin: 0; font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-1, #15151a);
}
.export-modal-h p { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-3, #8a8a96); }

.export-meta {
  display: flex; gap: 8px; margin: 16px 0 14px;
}
.export-pill {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 11px;
  background: var(--bg-1, #f6f6fa); border: 1px solid var(--line, #e7e7ee);
}
.export-pill b { font-size: 16px; color: var(--ink-1, #15151a); font-weight: 700; }
.export-pill span { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3, #8a8a96); }

.export-field { margin-bottom: 14px; }
.export-field label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3, #8a8a96); margin-bottom: 6px;
}
.export-field .fld-wrap {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--line, #e7e7ee); border-radius: 10px;
  background: var(--bg-1, #f6f6fa); overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.export-field .fld-wrap:focus-within {
  border-color: var(--acc, #6d5cff);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc, #6d5cff) 18%, transparent);
}
.export-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 14px; padding: 10px 12px; color: var(--ink-1, #15151a);
}
.export-field .fld-ext {
  padding: 10px 12px; font-size: 13px; color: var(--ink-3, #8a8a96);
  background: color-mix(in oklab, var(--ink-3, #8a8a96) 8%, transparent);
  font-family: var(--font-mono, "Space Mono", monospace);
}

.export-tip {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 18px;
  background: color-mix(in oklab, var(--acc, #6d5cff) 8%, transparent);
  font-size: 12px; line-height: 1.5; color: var(--ink-2, #4a4a55);
}
.export-tip svg { flex: none; margin-top: 1px; color: var(--acc, #6d5cff); }
.export-tip b { color: var(--ink-1, #15151a); font-weight: 700; }

.export-actions { display: flex; gap: 9px; justify-content: flex-end; }