/* Shared editor and send dialog presentation, extracted from the landing. */
.crest-editor-host { display: contents; }
        .demo-invoice-return {
            justify-self: start;
            min-height: 32px;
            padding: 2px 0;
            border: 0;
            border-bottom: 1px solid currentColor;
            background: transparent;
            color: var(--teal-action);
            font: 500 15px/1.25 var(--body);
            cursor: pointer;
        }

        .demo-invoice-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 16px;
            width: 100%;
            padding: 12px 14px;
            border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line));
            border-radius: 8px;
            background: color-mix(in srgb, var(--teal-soft) 46%, var(--panel));
            color: var(--ink);
            font-size: 14px;
            line-height: 1.35;
        }

        .demo-invoice-bar[hidden] {
            display: none;
        }

        .demo-invoice-bar strong {
            color: var(--navy);
            font-weight: 700;
        }

        .demo-invoice-bar .demo-invoice-return {
            margin-left: auto;
        }

        .generator-status {
            min-height: 22px;
            margin: 0;
            color: var(--muted);
            font-size: 0.8125rem;
            line-height: 1.35;
        }

        .live-invoice-dialog {
            /* Explicit containing block for .live-dialog-close's absolute
               positioning: a modally-shown <dialog> already has one via the
               UA `dialog:modal` rule, but a design-system preview rendered
               with a bare `open` attribute (no showModal()) does not.
               `position: relative` does not change a modal dialog's native
               top-layer centering; it only guarantees the same containing
               block outside a modal context. */
            position: relative;
            width: min(calc(100vw - 32px), 620px);
            max-width: min(calc(100vw - 32px), 620px);
            max-height: min(calc(100% - 32px), 760px);
            margin: auto;
            padding: 0;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--panel);
            color: var(--ink);
            box-shadow: var(--dialog-shadow);
            overflow: auto;
            scrollbar-gutter: stable;
        }

        .live-invoice-dialog:not([open]) {
            display: none;
        }

        /* PO round 5 (2026-09-18) item 4: the author rule `position: relative`
           above out-specifies the UA `dialog:modal { position: fixed }`, so a
           modally-shown dialog was laid out at its DOM position (top of the
           document) instead of in the viewport. On a phone, "Send invoice" at
           the bottom of a long page then showed only the blurred backdrop.
           Pin the modal to the viewport; the relative fallback stays for
           design-system previews rendered with a bare `open` attribute. */
        .live-invoice-dialog:modal {
            position: fixed;
            inset: 0;
            margin: auto;
            max-height: min(100dvh - 32px, 760px);
        }

        @media (max-width: 640px) {
            .live-invoice-dialog:modal {
                /* Top-anchored sheet on narrow widths so the title and first
                   controls are visible immediately; body scrolls inside. */
                margin: 16px auto auto;
                max-height: calc(100dvh - 32px);
            }
        }

        .live-invoice-dialog::backdrop {
            background: rgba(32, 44, 76, 0.46);
            backdrop-filter: blur(2px);
        }

        .live-dialog-shell {
            display: grid;
            gap: 20px;
            min-width: 0;
            width: auto;
            box-sizing: border-box;
            padding: clamp(20px, 6%, 32px);
        }

        .live-dialog-head {
            min-width: 0;
            /* Reserve room so the title never runs under the dialog-corner close control. */
            padding-inline-end: 56px;
        }

        .live-dialog-title {
            margin: 0;
            color: var(--navy);
            font-size: 1.25rem;
            line-height: 1.2;
        }

        /* Anchored to the dialog's own corner (not the shell's padded content
           column) so it reads as "close this lightbox", matching every
           .live-invoice-dialog consumer (Send invoice, Invoice sent, Pro notify). */
        .live-dialog-close.cp-icon-button {
            position: absolute;
            top: 8px;
            inset-inline-end: 8px;
            inline-size: 44px;
            block-size: 44px;
            min-inline-size: 44px;
            min-block-size: 44px;
            padding: 0;
            border: 1px solid transparent;
            border-radius: 8px;
            background: transparent;
            color: var(--muted);
            cursor: pointer;
        }

        .live-dialog-close.cp-icon-button:hover,
        .live-dialog-close.cp-icon-button:focus-visible {
            border-color: var(--line);
            background: var(--panel-soft);
        }

        .live-dialog-step {
            display: grid;
            gap: 16px;
            min-width: 0;
        }

        .live-dialog-step[hidden] {
            display: none;
        }

        .live-dialog-lede,
        .live-dialog-copy {
            margin: 0;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

        .live-dialog-section-title {
            margin: 0;
            color: var(--navy);
            font-size: 16px;
            line-height: 1.3;
        }

        .live-dialog-divider {
            height: 1px;
            border: 0;
            background: var(--line);
            margin: 2px 0;
        }

        .live-dialog-expiry,
        .live-dialog-recipient {
            margin: 0;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.4;
            overflow-wrap: anywhere;
        }

        .live-email-options {
            display: grid;
            gap: 12px;
            min-width: 0;
            border: 0;
            padding: 0;
            margin: 0;
        }

        .live-email-options legend {
            margin-bottom: 8px;
            color: var(--navy);
            font-weight: 400;
        }

        .live-email-option {
            display: flex;
            /* PO round 5 (2026-09-18) item 5: centre the control on its label
               line so the checkbox row sits on the same grid as the radios. */
            align-items: center;
            gap: 10px;
            min-width: 0;
            color: var(--ink);
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.4;
        }

        .live-email-option span {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .live-email-option input {
            width: 18px;
            height: 18px;
            margin: 2px 0 0;
            accent-color: var(--teal-action);
        }

        .live-message-field {
            display: grid;
            gap: 8px;
            color: var(--navy);
            font-size: 1rem;
            font-weight: 400;
        }

        .live-message-field textarea {
            width: 100%;
            min-height: 150px;
            resize: vertical;
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 12px;
            background: var(--panel);
            color: var(--ink);
            font: 500 1rem/1.45 var(--body);
        }

        .live-message-field textarea:focus {
            outline: var(--focus-outline);
            outline-offset: 1px;
        }

        .live-dialog-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .live-dialog-text-action {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: 0;
            border: 0;
            border-bottom: 1px solid currentColor;
            background: transparent;
            color: var(--teal-action);
            font: 400 1rem/1.2 var(--body);
            text-decoration: none;
            cursor: pointer;
        }

        .live-dialog-text-action[hidden] {
            display: none;
        }

        .live-demo-email-field {
            display: grid;
            gap: 8px;
            max-width: 420px;
            color: var(--muted);
            font-size: 1rem;
            font-weight: 400;
        }

        .live-demo-email-field[hidden] {
            display: none;
        }

        .live-demo-email-field input {
            width: 100%;
            min-width: 0;
            min-height: 44px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--panel);
            color: var(--ink);
            padding: 0 12px;
            font: 500 1rem/1.2 var(--body);
        }

        .live-demo-email-field input:focus {
            outline: var(--focus-outline);
            outline-offset: 1px;
        }

        .live-dialog-close [data-lucide] svg {
            inline-size: 20px;
            block-size: 20px;
        }

        .live-status-icon [data-lucide] svg {
            inline-size: 40px;
            block-size: 40px;
        }

        .live-success-statuses {
            display: grid;
            min-width: 0;
        }

        .live-success-status {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            gap: 12px;
            align-items: center;
            min-width: 0;
            padding-block: 4px 16px;
        }

        .live-success-status + .live-success-status {
            border-top: 1px solid var(--line);
            padding-block: 16px 4px;
        }

        .live-status-icon {
            display: inline-grid;
            place-items: center;
            inline-size: 40px;
            block-size: 40px;
            color: var(--teal-action);
        }

        .live-success-status div {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .live-success-status strong {
            color: var(--navy);
            font-size: 1rem;
            line-height: 1.3;
        }

        .live-success-status span:not(.live-status-icon):not([data-lucide]) {
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.4;
            overflow-wrap: anywhere;
        }

        .live-invoice-dialog .cp-button {
            font-size: 1rem;
        }

        .live-invoice-dialog .cp-copy-value-label {
            font-size: 1rem;
        }

        .live-invoice-dialog .privacy-note,
        .live-invoice-dialog .generator-status {
            font-size: 1rem;
        }

        [data-editor-id="liveInvoiceResult"] [data-editor-id="openGeneratedOwnerView"] {
            font-size: 1rem;
        }

        .privacy-note {
            margin: 0;
            color: var(--muted);
            font-size: var(--type-detail);
            line-height: 1.45;
        }

        .print-only-invoice {
            display: none;
        }

/* The editor document remains paper in both page themes. */
[data-editor-id="invoiceDoc"] .privacy-note {
    color: var(--crest-document-muted);
}

html[data-theme="dark"] [data-editor-id="invoiceDoc"] .privacy-note a {
    color: var(--crest-document-muted);
}

[data-editor-id="invoiceDoc"] .live-dialog-text-action {
    color: var(--crest-document-action);
}


[data-editor-id="generatorStatus"]:empty { display: none; }
        .invoice-editor {
            display: grid;
            gap: 18px;
            margin: 0;
            width: min(100%, 860px);
            min-width: 0;
        }