/* Generated from products/design-system/shared/late-payment by Navorina/scripts/sync-ds-invoice-document.mjs. Do not edit. */
/* Late payment (shared/late-payment.js): the interest calculator and reminder email on navorina.ai/tools/late-payment.
   Both islands sit in the guide calculator island (shared/guide-page.css) and use the DS segmented control from
   shared/tax-tool.css; this file adds the rate rows, the email preview and the copy action. */

.nv-late { display: grid; gap: var(--nv-guide-gap, 16px); }
.nv-late input[type="date"] { color-scheme: inherit; }
.nv-late-empty { padding: 16px 0; color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); line-height: 20px; }

/* Rate per half-year: label left, the rate and how it is made right. */
.nv-late-rows { display: grid; gap: 2px; margin-block-start: 16px; margin-inline: -12px; }
.nv-late-row { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; border-radius: 14px; }
.nv-late-row:hover { background: var(--nv-guide-well); }
.nv-late-row dt { color: var(--nv-text-secondary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }
.nv-late-row dd { margin: 0; text-align: end; font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-late-row dd strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.nv-late-row dd span { display: block; color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }
.nv-late-note { margin-block-start: 12px; color: var(--nv-text-tertiary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }

/* Email preview: the subject, then the body as it will paste, on the well. */
.nv-late-mail { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--nv-guide-well); }
.nv-late-mail__subject { display: grid; gap: 4px; }
.nv-late-mail__subject span { color: var(--nv-text-secondary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }
.nv-late-mail__subject strong { font-size: var(--nv-type-body-size, 14px); font-weight: 600; line-height: 20px; }
.nv-late-mail__body { margin: 0; color: var(--nv-text-primary); font: inherit; font-size: var(--nv-type-body-size, 14px); line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.nv-late-actions { display: flex; justify-content: flex-end; margin-block-start: 12px; }
.nv-late-toggle { margin-inline: -12px; }

@container nv-pub (max-width: 640px) {
  .nv-late-row { align-items: flex-start; flex-direction: column; gap: 2px; }
  .nv-late-row dd { text-align: start; }
  .nv-late-actions .nv-pub-btn { width: 100%; }
}