/* Generated from products/design-system/shared/iban-check by Navorina/scripts/sync-ds-invoice-document.mjs. Do not edit. */
/* IBAN check (shared/iban-check.js): the IBAN checker on navorina.ai/tools/iban-checker. It sits in the guide
   calculator island (shared/guide-page.css: island, field, input) and adds the verdict, the four checks and the IBAN
   in groups of four. Valid and invalid read from the words and a quiet mark; only a failed check takes the muted red. */

.nv-iban__form { display: grid; gap: 12px; max-width: 560px; }
.nv-iban__form input { font-family: var(--nv-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .02em; text-transform: uppercase; }
.nv-iban__form input::placeholder { color: var(--nv-text-tertiary); opacity: .55; text-transform: none; }
.nv-iban__out { display: grid; gap: 12px; min-height: 196px; margin-block-start: 20px; align-content: start; }

.nv-iban-empty { color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-iban-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.nv-iban-verdict strong { font-size: var(--nv-type-title-3-size, 20px); font-weight: 600; line-height: 1.2; }
.nv-iban-verdict span { color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); }
.nv-iban-verdict[data-nv-iban-state="invalid"] strong { color: var(--color-error, #d4554b); }
.nv-iban-reason { max-width: 64ch; color: var(--nv-text-secondary); font-size: var(--nv-type-body-size, 14px); line-height: 20px; }

/* Checks: one row each, a 6 px mark on the left axis. */
.nv-iban-checks { display: grid; gap: 2px; margin: 0 -12px; padding: 0; list-style: none; }
.nv-iban-check { display: flex; min-height: 32px; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; font-size: var(--nv-type-body-size, 14px); line-height: 20px; }
.nv-iban-check::before { width: 6px; height: 6px; flex: none; border-radius: 999px; background: currentColor; content: ""; }
.nv-iban-check--ok { color: var(--nv-text-primary); }
.nv-iban-check--wait { color: var(--nv-text-tertiary); }
.nv-iban-check--bad { color: var(--color-error, #d4554b); background: var(--color-error-soft, color-mix(in srgb, #d4554b 8%, transparent)); }

.nv-iban-printed { display: grid; gap: 4px; }
.nv-iban-printed span { color: var(--nv-text-secondary); font-size: var(--nv-type-footnote-size, 12px); line-height: 16px; }
.nv-iban-printed strong { overflow-wrap: anywhere; font-family: var(--nv-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--nv-type-body-size, 14px); font-weight: 500; letter-spacing: .02em; }