/* email-preview — the email as the client receives it (the classic Bullet email render).
   Shared: used by the invoice send flow (invoice-detail "Email invoice"), and inline copies
   still live on invoice-deposit.html + invoice-credit-note.html (migrate those here when next
   touched). Peter, 3 Jul 2026. */
.email-preview { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: 48px; max-width: 720px; text-align: center; }
.email-preview__hi { text-align: left; font-size: var(--text-sm); white-space: pre-line; line-height: 1.6; border-bottom: 1px solid var(--color-border); padding-bottom: 18px; margin-bottom: 24px; }
.email-preview__num { font-size: var(--text-section); font-weight: var(--weight-medium); }
.email-preview__for { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; }
.email-preview__due { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 14px 0; margin: 20px 0; font-size: var(--text-sm); }
.email-preview__cta { display: inline-block; background: #e8732c; color: #fff; text-decoration: none; padding: 10px 24px; border-radius: var(--radius-md); font-weight: var(--weight-medium); margin: 8px 0; }
.email-preview__attach { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--color-text-muted); border: var(--border-width) solid var(--color-border); border-radius: 999px; padding: 5px 12px; margin-top: 14px; }
.email-preview__attach svg { width: 13px; height: 13px; flex: none; }
.email-preview__foot { font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-bg-subtle-light); border-radius: var(--radius-sm); padding: 12px; margin-top: 24px; }
/* Letter-style templated email (the payslip email, payslip-email.js): left-aligned body
   copy — the centred layout above is the invoice's card shape. Peter, 15 Jul 2026. */
.email-preview--letter { text-align: left; }
.email-preview--letter p, .email-preview--letter ul { font-size: var(--text-sm); line-height: 1.6; margin: 0 0 14px; }
.email-preview--letter ul { padding-left: 22px; }
.email-preview--letter p:last-child { margin-bottom: 0; }
.email-preview--letter .psd-em-pslink { color: inherit; }

/* Entering the send step: the email arrives folded then opens fully — DS entrance easing. */
.email-preview.is-folding { overflow: hidden; transition: max-height 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .email-preview.is-folding { transition: none; } }