:root {
    --cp-surface-page: #f3f4ef;
    --cp-surface-document: #fffef9;
    --cp-surface-muted: #f5f7f5;
    --cp-ink: #202c4c;
    --cp-primary: #202c4c;
    --cp-primary-hover: #314067;
    --cp-on-color: #fffdf7;
    --cp-text: #263238;
    --cp-muted: #536471;
    --cp-example: #667085;
    --cp-safe: #176f67;
    --cp-safe-hover: #12645d;
    --cp-danger: #b42318;
    --cp-danger-hover: #8f1b13;
    --cp-border: rgba(32, 44, 76, 0.16);
    --cp-border-strong: rgba(32, 44, 76, 0.28);
    --cp-type-detail: 13px;
    --cp-type-body: 16px;
    --cp-type-heading: 20px;
    --cp-gap-in: 20px;
    --cp-gap-out: 40px;
    --cp-radius-document: 8px;
    --cp-radius-row: 6px;
    --cp-radius-control: 6px;
    --cp-hit-target: 44px;
    --cp-icon-size: 16px;
    --cp-disabled-opacity: 0.48;
    --cp-shadow-focus: 0 0 0 4px rgba(23, 111, 103, 0.14);
    --cp-invoice-content-track-min: min(5.25rem, 84px);
    --cp-invoice-amount-track: min(5.75rem, 92px);
    --cp-invoice-action-rail: calc(var(--cp-hit-target) * 2);
    --cp-invoice-grid-gap: 8px;
    --cp-invoice-row-grid: minmax(var(--cp-invoice-content-track-min), 1fr) var(--cp-invoice-amount-track) var(--cp-invoice-action-rail);
    --cp-invoice-row-min-inline-size: calc(var(--cp-invoice-content-track-min) + var(--cp-invoice-amount-track) + var(--cp-invoice-action-rail) + var(--cp-invoice-grid-gap) + var(--cp-invoice-grid-gap));
    --cp-invoice-shell-min-inline-size: calc(var(--cp-invoice-row-min-inline-size) + 20px);
}

.cp-invoice,
.crest-invoice-document {
    box-sizing: border-box;
    inline-size: min(100%, 760px);
    margin-inline: auto;
    display: grid;
    gap: var(--cp-gap-out);
    min-inline-size: 0;
    padding-block: clamp(var(--cp-gap-in), 5%, var(--cp-gap-out));
    padding-inline: min(
        clamp(var(--cp-gap-in), 5%, var(--cp-gap-out)),
        max(8px, calc((100% - var(--cp-invoice-row-min-inline-size) - 2px) / 2))
    );
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-document);
    background: var(--cp-surface-document);
    color: var(--cp-text);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--cp-type-body);
    line-height: 1.35;
    overflow: clip;
}

.cp-invoice *,
.crest-invoice-document * {
    box-sizing: border-box;
    min-inline-size: 0;
    letter-spacing: 0;
}

.cp-invoice-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cp-hit-target);
    gap: 12px;
    align-items: start;
}

.cp-invoice-id {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: baseline;
}

.cp-invoice-word,
.cp-invoice-number {
    color: var(--cp-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--cp-type-heading);
    font-weight: 700;
    line-height: 1.2;
}

.cp-invoice-number.is-example,
.cp-field.is-example,
.cp-detail-field.is-example {
    color: var(--cp-example);
}

input.cp-invoice-number,
textarea.cp-invoice-number {
    inline-size: min(100%, 18rem);
    padding-inline: 0;
    font: 700 var(--cp-type-heading) / 1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cp-meta-grid,
.cp-party-grid,
.cp-section {
    display: grid;
    gap: var(--cp-gap-in);
}

.cp-meta-grid,
.cp-party-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    align-items: start;
}

.cp-field-group {
    display: grid;
    gap: 8px;
}

.cp-optional-field,
.cp-optional-note {
    min-inline-size: 0;
}

.cp-optional-add {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    inline-size: fit-content;
    min-inline-size: var(--cp-hit-target);
    min-block-size: var(--cp-hit-target);
    padding: 8px 0;
    border: 0;
    border-block-end: 1px solid var(--cp-safe);
    background: transparent;
    color: var(--cp-safe);
    font: 500 var(--cp-type-detail) / 1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
}

.cp-optional-add:hover {
    color: var(--cp-safe-hover);
    border-block-end-color: var(--cp-safe-hover);
}

.cp-optional-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cp-hit-target);
    align-items: start;
    gap: 8px;
    min-inline-size: 0;
}

.cp-optional-editor[hidden] {
    display: none !important;
}

.cp-optional-note .cp-field-group {
    min-inline-size: 0;
}

.cp-multiline-field,
.cp-multiline-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cp-invoice-note .cp-multiline-text {
    margin: 0;
}

.cp-field-label,
.cp-section-title {
    margin: 0;
    color: var(--cp-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--cp-type-body);
    font-weight: 700;
}

.cp-row-title {
    margin: 0;
    color: var(--cp-ink);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--cp-type-body);
    font-weight: 600;
}

.cp-payment-provider-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cp-payment-provider-logo {
    display: block;
    flex: 0 0 auto;
    inline-size: calc(var(--cp-hit-target) / 2);
    block-size: calc(var(--cp-hit-target) / 2);
    object-fit: contain;
}

.cp-payment-provider-logo[data-payment-provider-logo="Venmo"] {
    inline-size: calc(var(--cp-hit-target) * 1.5);
}

.cp-payment-app-value {
    grid-column: 1 / -1;
}

.cp-detail {
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
}

.cp-field,
.cp-detail-field {
    display: block;
    inline-size: 100%;
    min-block-size: 31px;
    padding: 4px 0;
    border: 0;
    border-block-end: 1px dotted var(--cp-border-strong);
    border-radius: var(--cp-radius-control);
    background: transparent;
    color: var(--cp-text);
    font: 500 var(--cp-type-body) / 1.35 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    outline: 0;
    overflow-wrap: anywhere;
}

textarea.cp-field,
textarea.cp-detail-field {
    resize: none;
    field-sizing: content;
    min-block-size: 31px;
    overflow: hidden;
}

.cp-field.cp-row-title {
    font-weight: 500;
}

.cp-field:hover,
.cp-detail-field:hover {
    border-block-end-color: var(--cp-border-strong);
    background: var(--cp-surface-muted);
}

.cp-field:focus-visible,
.cp-detail-field:focus-visible,
.cp-inline-value:focus-visible,
.cp-button:focus-visible,
.cp-icon-button:focus-visible,
.cp-kind-choice:focus-visible,
.cp-method-select:focus-visible,
.cp-change-type:focus-visible {
    outline: 2px solid var(--cp-safe);
    outline-offset: 2px;
    box-shadow: var(--cp-shadow-focus);
}

.cp-optional-add:focus-visible {
    outline: 2px solid var(--cp-safe);
    outline-offset: 2px;
    box-shadow: var(--cp-shadow-focus);
}

.cp-field.field-invalid,
.cp-detail-field.field-invalid,
.cp-field:invalid:not(:focus):not(.is-example),
.cp-detail-field:invalid:not(:focus):not(.is-example) {
    color: var(--cp-danger);
    border-block-end-color: var(--cp-danger);
}

.cp-field:disabled,
.cp-detail-field:disabled,
.cp-icon-button:disabled {
    opacity: 0.48;
    pointer-events: none;
}

.cp-button:disabled,
.cp-button[aria-disabled="true"] {
    opacity: var(--cp-disabled-opacity);
    pointer-events: none;
    cursor: not-allowed;
}

.cp-due-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: baseline;
}

.cp-due-date {
    inline-size: 7.5rem;
    max-inline-size: 100%;
}

.cp-meta-grid input[type="date"] {
    inline-size: 7.5rem;
    max-inline-size: 100%;
}

.cp-due-separator {
    white-space: pre;
}

.cp-inline-value {
    inline-size: 3.25ch;
    min-block-size: 0;
    padding: 0;
    border: 0;
    border-block-end: 1px dotted var(--cp-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--cp-text);
    font: inherit;
    text-align: center;
}

.cp-section-head {
    display: block;
}

.cp-list {
    display: grid;
    gap: 12px;
}

.cp-list-column-header,
.cp-money-row,
.cp-method-row,
.cp-total-band {
    display: grid;
    grid-template-columns: var(--cp-invoice-row-grid);
    gap: var(--cp-invoice-grid-gap);
}

.cp-money-row {
    align-items: start;
}

.cp-money-row .cp-field {
    min-block-size: var(--cp-hit-target);
    padding-block: 10px;
}

.cp-method-row {
    align-items: start;
}

.cp-payment-method-body {
    grid-column: 1 / 3;
    min-inline-size: 0;
    padding: 12px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-row);
}

.cp-method-row:hover > .cp-payment-method-body,
.cp-method-row:focus-within > .cp-payment-method-body {
    border-color: var(--cp-border-strong);
}

.cp-method-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.cp-change-type {
    min-block-size: 24px;
    padding: 0;
    border: 0;
    border-block-end: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--cp-safe);
    font: 500 var(--cp-type-detail) / 1.35 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
}

.cp-change-type:hover {
    color: var(--cp-safe-hover);
}

.cp-money-row > :first-child {
    min-inline-size: 0;
}

.cp-money-row > .cp-amount,
.cp-total-band > .cp-amount {
    grid-column: 2;
    inline-size: 100%;
}

.cp-money-row > .cp-row-actions,
.cp-method-row > .cp-row-actions {
    grid-column: 3;
    margin-inline-start: auto;
}

.cp-row {
    padding-block: 12px;
    border-block-start: 1px solid var(--cp-border);
}

.cp-row > div,
.cp-row-title,
.cp-detail-cell,
.cp-detail-cell span,
.cp-detail-field,
.cid-field-value,
.cid-instructions {
    overflow-wrap: anywhere;
    word-break: normal;
}

.cp-row:hover,
.cp-row:focus-within {
    border-color: var(--cp-border-strong);
}

.cp-amount {
    justify-self: end;
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: var(--cp-type-body);
}

.cp-amount-heading {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 8px;
    align-items: baseline;
}

.cp-currency {
    inline-size: auto;
    padding: 0;
    border: 0;
    border-block-end: 1px dotted var(--cp-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--cp-muted);
    font: 700 var(--cp-type-detail) / 1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

input.cp-amount {
    inline-size: 9ch;
    max-inline-size: 100%;
}

.cp-row-actions {
    display: grid;
    grid-template-columns: repeat(2, var(--cp-hit-target));
    inline-size: calc(var(--cp-hit-target) * 2);
    justify-self: end;
    margin-block-start: 0;
}

.cp-method-row > .cp-row-actions {
    margin-block-start: 3px;
}

.cp-method-row[data-payment-editing="true"] > .cp-payment-method-body {
    grid-column: 1 / -1;
}

.cp-method-row[data-payment-editing="true"] > .cp-row-actions {
    grid-column: 1 / -1;
    grid-row: 2;
}

.cp-payment-validation {
    grid-column: 1 / -1;
    min-inline-size: 0;
}

.cp-action-spacer {
    inline-size: var(--cp-hit-target);
    block-size: var(--cp-hit-target);
}

.cp-icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: var(--cp-hit-target);
    block-size: var(--cp-hit-target);
    min-inline-size: var(--cp-hit-target);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cp-radius-control);
    color: var(--cp-ink);
    background: transparent;
    font: 500 var(--cp-type-body) / 1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
}

.cp-copy-value {
    display: grid;
    gap: 4px;
    min-inline-size: 0;
    max-inline-size: 100%;
}

.cp-copy-value-label {
    color: var(--cp-muted);
    font-size: var(--cp-type-body);
}

.cp-copy-value-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    max-inline-size: 100%;
    inline-size: fit-content;
}

.cp-copy-value-text {
    min-inline-size: 0;
    max-inline-size: calc(100% - var(--cp-hit-target) - 8px);
    color: var(--cp-safe);
    overflow-wrap: anywhere;
    word-break: normal;
}

.cp-copy-value-action {
    display: inline-grid;
    flex: 0 0 var(--cp-hit-target);
    place-items: center;
    inline-size: var(--cp-hit-target);
    block-size: var(--cp-hit-target);
    min-inline-size: var(--cp-hit-target);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cp-muted);
    cursor: pointer;
}

.cp-copy-value-action:hover {
    color: var(--cp-safe);
}

.cp-copy-value-action:focus-visible {
    outline: 2px solid var(--cp-safe);
    outline-offset: 2px;
}

.cp-copy-value-action [data-lucide] svg {
    display: block;
    inline-size: var(--cp-icon-size);
    block-size: var(--cp-icon-size);
}

.cp-icon-button [data-lucide] svg,
.cp-icon-button > svg,
[data-lucide] > svg {
    inline-size: var(--cp-icon-size);
    block-size: var(--cp-icon-size);
    stroke-width: 2;
}

.cp-icon-button:hover,
.cp-icon-button:focus-visible {
    border-color: var(--cp-border-strong);
    background: var(--cp-surface-muted);
}

.cp-icon-button.is-danger {
    color: var(--cp-danger);
}

.cp-icon-button.is-danger:hover,
.cp-icon-button.is-danger:focus-visible {
    color: var(--cp-danger-hover);
}

.cp-icon-button.is-magic {
    color: var(--cp-safe);
}

.cp-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 10px var(--cp-gap-in);
    margin-block-start: 12px;
}

.cp-detail-cell,
.cp-detail-input {
    display: grid;
    gap: 4px;
    color: var(--cp-text);
    font-size: var(--cp-type-detail);
}

.cp-detail-cell .cp-detail-label,
.cp-detail-input > span {
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
    font-weight: 500;
}

.cp-requisite-copy {
    appearance: none;
    grid-template-columns: minmax(0, 1fr) var(--cp-icon-size);
    grid-template-areas:
        "label glyph"
        "value glyph";
    align-items: center;
    gap: 4px 8px;
    inline-size: 100%;
    min-block-size: var(--cp-hit-target);
    padding: 4px;
    border: 0;
    border-radius: var(--cp-radius-control);
    background: transparent;
    color: var(--cp-text);
    font-family: inherit;
    font-size: var(--cp-type-detail);
    font-weight: 500;
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
}

.cp-recipient-edit-trigger {
    appearance: none;
    grid-template-columns: minmax(0, 1fr) var(--cp-icon-size);
    grid-template-areas:
        "label glyph"
        "value glyph";
    align-items: center;
    gap: 4px 8px;
    inline-size: 100%;
    min-block-size: var(--cp-hit-target);
    padding: 4px;
    border: 0;
    border-radius: var(--cp-radius-control);
    background: transparent;
    color: var(--cp-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.cp-recipient-edit-trigger .cp-detail-label {
    grid-area: label;
}

.cp-recipient-edit-glyph {
    grid-area: glyph;
    display: grid;
    place-items: center;
    inline-size: var(--cp-icon-size);
    block-size: var(--cp-icon-size);
    color: var(--cp-muted);
}

.cp-recipient-edit-glyph svg {
    inline-size: var(--cp-icon-size);
    block-size: var(--cp-icon-size);
}

.cp-recipient-edit-trigger:hover:not(:disabled) {
    background: var(--cp-surface-muted);
}

.cp-recipient-edit-trigger:hover:not(:disabled) .cp-recipient-edit-glyph {
    color: var(--cp-safe);
}

.cp-recipient-edit-trigger:focus-visible {
    outline: 2px solid var(--cp-safe);
    outline-offset: 2px;
    box-shadow: var(--cp-shadow-focus);
}

.cp-recipient-editing {
    min-block-size: var(--cp-hit-target);
}

.cp-recipient-edit-input {
    min-inline-size: 0;
    inline-size: 100%;
}

.cp-requisite-copy .cp-detail-label {
    grid-area: label;
}

.cp-requisite-value {
    grid-area: value;
    overflow-wrap: anywhere;
    user-select: text;
}

.cp-payment-copy-glyph {
    grid-area: glyph;
    display: grid;
    place-items: center;
    inline-size: var(--cp-icon-size);
    min-inline-size: var(--cp-icon-size);
    block-size: var(--cp-icon-size);
    color: var(--cp-muted);
}

.cp-payment-copy-glyph svg {
    display: block;
    inline-size: var(--cp-icon-size);
    block-size: var(--cp-icon-size);
}

.cp-payment-copy-control .cp-payment-copy-glyph {
    grid-area: auto;
}

.cp-requisite-copy:hover:not(:disabled) .cp-payment-copy-glyph,
.cp-payment-copy-control:hover:not(:disabled) .cp-payment-copy-glyph,
.cp-requisite-copy[data-copy-state="success"] .cp-payment-copy-glyph,
.cp-payment-copy-control[data-copy-state="success"] .cp-payment-copy-glyph {
    color: var(--cp-safe);
}

.cp-requisite-copy[data-copy-state="error"] .cp-payment-copy-glyph,
.cp-payment-copy-control[data-copy-state="error"] .cp-payment-copy-glyph {
    color: var(--cp-danger);
}

.cp-requisite-copy:focus-visible,
.cp-payment-online-action:focus-visible {
    outline: 2px solid var(--cp-safe);
    outline-offset: 2px;
    box-shadow: var(--cp-shadow-focus);
}

.cp-requisite-copy:disabled {
    opacity: 0.48;
    pointer-events: none;
    cursor: not-allowed;
}

.cp-payment-online-action {
    inline-size: 100%;
    margin-block-start: 12px;
    text-decoration: none;
}

.cp-detail-field {
    min-block-size: 27px;
    padding-block: 2px;
    font-size: var(--cp-type-detail);
}

.cp-kind-chooser {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 12px;
}

.cp-kind-choice {
    min-block-size: 36px;
    padding: 7px 10px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-control);
    background: var(--cp-surface-document);
    color: var(--cp-ink);
    font: 700 var(--cp-type-body) / 1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
}

.cp-kind-choice:hover {
    border-color: var(--cp-border-strong);
    background: var(--cp-surface-muted);
}

.cp-method-selector-field {
    max-inline-size: 24rem;
    margin-block-start: 12px;
}

.cp-payment-method-choice .ss-main {
    --ss-primary-color: var(--cp-primary);
    --ss-bg-color: var(--cp-surface-document);
    --ss-font-color: var(--cp-text);
    --ss-placeholder-color: var(--cp-muted);
    --ss-border-color: var(--cp-border-strong);
    --ss-focus-color: var(--cp-safe);
    --ss-main-height: var(--cp-hit-target);
    --ss-search-height: var(--cp-hit-target);
    --ss-option-height: var(--cp-hit-target);
    --ss-border-radius: var(--cp-radius-control);
    min-block-size: var(--cp-hit-target);
    border-color: var(--cp-border-strong);
    font-size: var(--cp-type-body);
    font-weight: 500;
}

.cp-payment-method-choice .ss-main:focus-visible {
    outline: 2px solid var(--cp-safe);
    outline-offset: 2px;
    box-shadow: var(--cp-shadow-focus);
}

.cp-payment-method-choice .ss-main.ss-open {
    border-color: var(--cp-primary);
}

.cp-payment-method-option-content {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    gap: 9px;
    align-items: center;
    inline-size: 100%;
    min-inline-size: 0;
    text-align: start;
}

.cp-payment-method-option-content[data-app-logo-shape="wordmark"] {
    grid-template-columns: 64px minmax(0, 1fr) 18px;
}

.cp-payment-method-option-content:not(:has(.cp-payment-method-logo, .cp-payment-method-emoji)) {
    grid-template-columns: minmax(0, 1fr) 18px;
}

.cp-payment-method-logo,
.cp-payment-method-emoji {
    display: block;
    inline-size: 24px;
    block-size: 24px;
    object-fit: contain;
    border-radius: 5px;
}

.cp-payment-method-logo[data-app-logo-shape="wordmark"] {
    inline-size: 64px;
    block-size: 18px;
    border-radius: 0;
}

.cp-payment-method-emoji {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}

.cp-payment-method-option-name {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    color: var(--cp-text);
    font-size: var(--cp-type-body);
    font-weight: 500;
}

.cp-payment-method-check {
    inline-size: 18px;
    block-size: 18px;
    visibility: hidden;
}

.cp-payment-method-choice .ss-main .cp-payment-method-option-content {
    grid-template-columns: 24px minmax(0, 1fr);
}

.cp-payment-method-choice .ss-main .cp-payment-method-option-content[data-app-logo-shape="wordmark"] {
    grid-template-columns: 64px minmax(0, 1fr);
}

.cp-payment-method-choice .ss-main .cp-payment-method-option-content:not(:has(.cp-payment-method-logo, .cp-payment-method-emoji)) {
    grid-template-columns: minmax(0, 1fr);
}

.cp-payment-method-choice .ss-main .cp-payment-method-check {
    display: none;
}

.ss-content .ss-option.ss-selected .cp-payment-method-check {
    visibility: visible;
}

.cp-method-select {
    inline-size: 100%;
    min-block-size: var(--cp-hit-target);
    padding: 0 12px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-control);
    background: var(--cp-surface-document);
    color: var(--cp-text);
    font: 500 var(--cp-type-body) / 1.35 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
}

.cp-method-select:hover {
    border-color: var(--cp-border-strong);
}

.cp-total-band {
    align-items: center;
    padding: 14px 0;
    border-radius: var(--cp-radius-row);
    background: var(--cp-surface-muted);
}

.cp-total-band > .cp-amount {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-align: end;
    white-space: normal;
}

.cp-total-band .cp-section-title,
.cp-total-band .cp-amount {
    color: var(--cp-ink);
    font-size: var(--cp-type-heading);
    font-weight: 700;
    line-height: 1.2;
}

.cp-list-column-header {
    align-items: center;
    color: var(--cp-ink);
    font-size: var(--cp-type-body);
    font-weight: 700;
}

.cp-list-column-header-amount {
    justify-self: end;
    text-align: end;
}

.cp-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

[hidden] {
    display: none !important;
}

.cp-intake-field {
    inline-size: 100%;
    min-block-size: var(--cp-hit-target);
    padding: 9px 10px;
    border: 1px solid var(--cp-border-strong);
    border-radius: var(--cp-radius-control);
    color: var(--cp-text);
    background: var(--cp-surface-document);
    font: inherit;
}

.cp-intake-error {
    margin: 8px 0 0;
    color: var(--cp-danger);
    font-size: var(--cp-type-detail);
    font-weight: 600;
}

.cp-total-band > :first-child {
    min-inline-size: 0;
}

.cp-doc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    padding-block-start: var(--cp-gap-in);
    border-block-start: 1px solid var(--cp-border);
}

.cp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--cp-hit-target);
    padding: 8px 12px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-control);
    background: var(--cp-surface-document);
    color: var(--cp-ink);
    text-decoration: none;
    font: 700 var(--cp-type-body) / 1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
}

.cp-button:hover {
    border-color: var(--cp-border-strong);
    background: var(--cp-surface-muted);
}

.cp-button-primary {
    border-color: var(--cp-primary);
    background: var(--cp-primary);
    color: var(--cp-on-color);
}

.cp-button-primary:hover {
    border-color: var(--cp-primary-hover);
    background: var(--cp-primary-hover);
}

.cp-button-safe-outline {
    border-color: var(--cp-safe);
    background: var(--cp-surface-document);
    color: var(--cp-safe);
}

.cp-button-safe-outline:hover {
    border-color: var(--cp-safe-hover);
    background: var(--cp-surface-muted);
    color: var(--cp-safe-hover);
}

.cp-button-safe {
    border-color: var(--cp-safe);
    background: var(--cp-safe);
    color: var(--cp-on-color);
}

.cp-button-safe:hover {
    border-color: var(--cp-safe-hover);
    background: var(--cp-safe-hover);
    color: var(--cp-on-color);
}

.cp-button-danger {
    border-color: var(--cp-danger);
    background: var(--cp-danger);
    color: var(--cp-on-color);
}

.cp-button-danger:hover {
    border-color: var(--cp-danger-hover);
    background: var(--cp-danger-hover);
    color: var(--cp-on-color);
}

.cp-status {
    min-block-size: 20px;
    margin: 0;
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
}

.cp-status.is-error {
    color: var(--cp-danger);
}

.cp-payment-root,
.cid-payment-root {
    min-inline-size: 0;
}

.cp-payment-reference-note {
    margin: 0;
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
    font-weight: 500;
    line-height: 1.45;
}

.cid-payment-section,
.cid-payment-list {
    display: grid;
    gap: var(--cp-gap-in);
}

.cid-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cp-hit-target);
    gap: 8px;
    align-items: start;
}

.cid-field a {
    color: var(--cp-safe);
    overflow-wrap: anywhere;
}

.cid-instructions {
    margin: 0;
    white-space: pre-wrap;
    font-size: var(--cp-type-detail);
}

.cid-copy-status {
    min-block-size: 20px;
    margin: 0;
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
}

.cp-walkthrough-trigger {
    justify-self: start;
    inline-size: fit-content;
    max-inline-size: 100%;
}

.cp-walkthrough-highlight {
    position: fixed;
    z-index: 80;
    pointer-events: none;
    border: 2px solid var(--cp-safe);
    border-radius: var(--cp-radius-row);
}

.cp-walkthrough-highlight[data-motion="allowed"] {
    transition: inset 160ms ease, inline-size 160ms ease, block-size 160ms ease;
}

.cp-walkthrough-coach {
    position: fixed;
    z-index: 90;
    display: grid;
    gap: calc(var(--cp-gap-in) / 2);
    inline-size: min(calc(100vw - 24px), 340px);
    max-block-size: calc(100vh - 24px);
    max-block-size: calc(100dvh - 24px);
    padding: var(--cp-gap-in);
    overflow: auto;
    border: 1px solid var(--cp-border-strong);
    border-radius: var(--cp-radius-document);
    background: var(--cp-surface-document);
    color: var(--cp-text);
    font: 500 var(--cp-type-body) / 1.35 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cp-walkthrough-coach[data-editing-pause="true"] {
    visibility: hidden;
    pointer-events: none;
}

.cp-walkthrough-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--cp-gap-in) / 2);
}

.cp-walkthrough-progress,
.cp-walkthrough-title,
.cp-walkthrough-instruction {
    margin: 0;
}

.cp-walkthrough-progress {
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
    font-weight: 700;
}

.cp-walkthrough-title {
    color: var(--cp-ink);
    font-size: var(--cp-type-heading);
    line-height: 1.2;
}

.cp-walkthrough-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.cp-walkthrough-actions .cp-button {
    flex: 1 1 0;
}

@media print {
    .cp-invoice,
    .crest-invoice-document {
        inline-size: 100%;
        gap: 24px;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: #111;
        background: #fff;
        overflow: visible;
    }

    .cp-icon-button,
    .cp-copy-value-action,
    .cp-requisite-copy,
    .cp-recipient-edit-trigger,
    .cp-recipient-editing,
    .cp-payment-online-action,
    .cp-payment-copy-status,
    .cp-walkthrough-trigger,
    .cp-walkthrough-highlight,
    .cp-walkthrough-coach,
    .cp-optional-add,
    .cp-optional-editor > .cp-icon-button,
    .cp-doc-actions,
    .cp-row-actions,
    .cid-copy-status,
    .cid-field > .cp-icon-button {
        display: none !important;
    }

    .cp-requisite-copy {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "value";
        min-block-size: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #111;
        opacity: 1;
        cursor: default;
    }

    .cp-payment-copy-glyph {
        display: none !important;
    }

    .cp-meta-grid,
    .cp-party-grid,
    .cp-section,
    .cid-payment-section,
    .cid-payment-list {
        gap: 12px;
    }

    .cp-list {
        gap: 8px;
    }

    .cp-method-row > :first-child {
        padding: 8px;
    }

    .cp-detail-grid {
        gap: 6px 12px;
    }

    .cp-row,
    .cp-method-row,
    .cp-total-band {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .cp-section-title {
        break-after: avoid;
        page-break-after: avoid;
    }
}
