/* ── Live preview (Shadow DOM host & scaler) ──────────────────────────────────
   Resume / cover-letter HTML is rendered inside a Shadow DOM root using the
   shared `render-html.js` builder + the PDF template's own `style.css`
   (fetched via /api/template-css.php). That's the single source of truth for
   visual styling — DO NOT add resume/template rules here, they'd never apply.
   Only host-side concerns belong here (wrapper, scaler, empty-state overlay).
   The font @import below preloads every font used across templates so they're
   ready when a template's CSS references them inside the shadow root. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Jost:wght@300;400;500;600&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Barlow+Condensed:wght@600;700&family=Cinzel:wght@500;700&family=Lato:wght@300;400;500;700&family=Manrope:wght@400;500;600;700;800&family=Bodoni+Moda:ital,wght@0,400;0,500;0,700;1,400;1,600&family=Source+Serif+4:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500;600;700;800&family=Raleway:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Sora:wght@300;400;500;600;700;800&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Italiana&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

.preview-shadow-host {
  display: block;
  pointer-events: auto;
}
.preview-shadow-host.preview-editable {
  cursor: pointer;
}

.preview-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10pt; color: #9ca3af;
  font-family: 'Inter', sans-serif; font-size: 11pt; text-align: center;
  pointer-events: none;
}
.preview-empty-icon { font-size: 36pt; }