/* crest-demo-loop (H412, docs/design-system/REGISTRY.md): the figure that frames a landing section's live sandbox of the product's own components
   (Send, Track and Manage; the animated loops are retired, B599 packet B5b). The server renders the resting state inert, and the sandbox's script lifts inert once the real control is mounted.
   The screen is the product on the host's band and nothing more: no mat, no shadow; the real cards inside keep their own look.
   Tokens only, no width or height query, no layout read. */
.crest-demo-loop { position: relative; display: grid; gap: 12px; width: 100%; max-width: 30rem; min-width: 0; margin: 0; }
.crest-demo-loop__screen { display: grid; grid-auto-rows: 1fr; gap: var(--cp-gap-in); min-width: 0; padding: 1px; }
.crest-demo-loop__screen[inert] { cursor: default; user-select: none; -webkit-user-select: none; }
.crest-demo-loop__screen[inert], .crest-demo-loop__screen[inert] * { pointer-events: none; cursor: default !important; }
/* The Track figure's sandbox (assets/crest-track-sandbox.js) lifts inert once the real control is mounted; the owner's result sits under it, set off the way the payer's block is. */
.crest-demo-loop [data-track-owner]:not([hidden]) { display: grid; gap: var(--cp-gap-in); justify-items: start; padding-block-start: var(--cp-gap-out); border-block-start: 1px solid var(--cp-border); }
.crest-demo-loop [data-track-owner] .crest-demo-loop__facts { inline-size: 100%; }
/* The Manage figure's sandbox (assets/crest-manage-sandbox.js) lifts inert once the real owner action is mounted; the owner's page sits under the register row, set off the way the Track owner block is. The two class rules are the owner page's own (invoice.html). */
.crest-demo-loop[data-manage-sandbox] .hidden { display: none; }
.crest-demo-loop [data-manage-owner] { display: grid; gap: var(--cp-gap-in); padding-block-start: var(--cp-gap-out); border-block-start: 1px solid var(--cp-border); }
.crest-demo-loop [data-manage-owner] .crest-demo-loop__facts { inline-size: 100%; }
.crest-demo-loop .owner-state-heading { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--cp-ink); font-size: var(--cp-type-heading); line-height: 1.2; }
.crest-demo-loop .owner-state-heading-icon { flex: 0 0 auto; inline-size: 20px; block-size: 20px; color: var(--cp-safe); }
/* Card padding (H412 gutter): 16px on a phone, growing with the card to --cp-gap-out; the same edge as the landing's editor card. */
.crest-demo-loop .crest-invoice-document { inline-size: 100%; margin: 0; padding: min(calc(16px + max(0px, 100% - 420px) * 0.065), var(--cp-gap-out)); padding-inline: min(calc(16px + max(0px, 100% - 420px) * 0.065), var(--cp-gap-out), max(0px, calc((100% - var(--cp-invoice-row-min-inline-size) - 2px) / 2))); }
.crest-demo-loop__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.crest-demo-loop .cp-section { margin: 0; }
.crest-demo-loop .cp-section { display: grid; gap: 4px; }
.crest-demo-loop .crest-invoice-document > .cp-section { gap: 8px; }
.crest-demo-loop .crest-invoice-document { grid-template-columns: minmax(0, 1fr); align-content: center; } /* every screen is as high as the tallest (min-block-size), its card stretches and the content sits in the middle */
.crest-demo-loop .live-invoice-dialog[open] { display: grid; }
.crest-demo-loop .live-dialog-shell { align-content: center; }
.crest-demo-loop .live-success-status { padding-block: 4px 8px; }
.crest-demo-loop .live-success-status + .live-success-status { padding-block: 8px 4px; }
.crest-demo-loop .client-report-root { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.crest-demo-loop .client-report-root > h2:first-child { padding-inline-end: var(--cp-hit-target); } /* a long first line stays clear of the pause control in the corner */
.crest-demo-loop .cp-payment-online-action, .crest-demo-loop .payer-report-action { justify-self: start; }
.crest-demo-loop .cp-intake-field { inline-size: 100%; }
.crest-demo-loop .cp-method-editor-row { display: block; } /* no row actions in the story: the row is its card, as wide as the screen at any width */
/* the row's three-column grid has a minimum wider than a 280px screen: the copy button sits in the card's corner instead */
.crest-demo-loop .cid-payment-method { display: block; position: relative; }
.crest-demo-loop .cid-payment-method > .cp-row-actions { position: absolute; inset-block-start: 0; inset-inline-end: 0; grid-template-columns: var(--cp-hit-target); inline-size: var(--cp-hit-target); margin: 0; }
.crest-demo-loop .cid-payment-method .cp-method-heading { padding-inline-end: var(--cp-hit-target); }
.crest-demo-loop .cp-action-spacer { display: none; }
.crest-demo-loop .invoice-lifecycle-tabs { flex-wrap: wrap; }
.crest-demo-loop .invoice-lifecycle-tab { flex-wrap: nowrap; gap: 4px; padding-inline: 6px; font-size: var(--cp-type-detail); } /* four tabs share one row at 390 */
.crest-demo-loop .cp-method-select { inline-size: 100%; }
.crest-demo-loop .live-invoice-dialog { inline-size: 100%; max-inline-size: 100%; max-block-size: none; overflow: visible; }
.crest-demo-loop .live-dialog-shell { padding: min(calc(16px + max(0px, 100% - 420px) * 0.065), var(--cp-gap-out)); gap: var(--cp-gap-in); }
.crest-demo-loop .live-message-field textarea { resize: none; block-size: 9.5rem; min-block-size: 0; }
/* The Send figure's sandbox (assets/crest-send-sandbox.js) renders the send dialog's own steps. Its two steps share one cell, so pressing Send moves nothing below the figure, and the one not showing is invisible, out of the tab order and the accessibility tree. */
.crest-demo-loop[data-send-sandbox] .live-dialog-head { grid-area: 1 / 1; }
.crest-demo-loop[data-send-sandbox] .live-dialog-shell > .live-dialog-step { grid-area: 2 / 1; }
.crest-demo-loop[data-send-sandbox] .live-dialog-shell > .live-dialog-step[hidden] { display: grid; visibility: hidden; }
.crest-demo-loop[data-send-sandbox] .generator-status { grid-area: 3 / 1; }
.crest-demo-loop .invoice-register { margin: 0; }
/* the landing's own table rules (full-width minimum, row rules, bold first column) are for its comparison tables, not this register */
.crest-demo-loop .invoice-register__table { min-inline-size: 0; }
.crest-demo-loop .invoice-register__table td { border: 0; }
.crest-demo-loop .invoice-register__table td:first-child { color: var(--cp-text); font-weight: 400; }
/* The register is the product's own markup, which hides text with its page's .visually-hidden (empty counts, the Status column head). */
.crest-demo-loop .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; }
/* The invoice that fills the panel below the register (assets/crest-manage-sandbox.js marks it). */
.crest-demo-loop .invoice-register__table tbody tr[aria-current="true"] { background: var(--cp-surface-muted); }
.crest-demo-loop .invoice-register__table tbody tr[aria-current="true"] .invoice-register__client > :first-child { font-weight: 600; }
/* Keyboard focus rings the whole row, as on /my; the name keeps only its underline. */
.crest-demo-loop .invoice-register__open:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: 2px solid var(--cp-safe); outline-offset: 2px; clip-path: inset(0); } /* the approved ring, clipped to the name: the row shows the ring */
.crest-demo-loop .invoice-register__table tbody tr { position: relative; }
.crest-demo-loop .invoice-register__table tbody tr:has(.invoice-register__open:focus-visible)::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--cp-safe); border-radius: inherit; pointer-events: none; }
.crest-demo-loop__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.crest-demo-loop__caption { display: grid; margin: 0; flex: 1 1 14rem; color: var(--ink); font-size: var(--cp-type-detail); line-height: 1.5; }
.crest-demo-loop__caption > span { grid-area: 1 / 1; visibility: hidden; }
.crest-demo-loop__caption > span.is-current { visibility: visible; }
/* Try hint and cue (B599 packet B4). Pattern from backlog.works' try embed (src/backlogworks/web/embed_demo.py, docs/design-system.md Version 122): a plain hint line naming the control, and a translucent marker on it, both stopped by the visitor's first real input; reduced motion keeps the hint and drops the marker. The hint's line is reserved from the first paint (hidden, not removed) until the sandbox mounts and after the first touch it goes the same way, so nothing ever moves (a collapse on pointerdown would shift the control under the press and lose the click). */
.crest-try-hint { margin: 0; color: var(--cp-ink); font-size: var(--cp-type-detail); font-weight: 600; line-height: 1.5; visibility: hidden; }
.crest-demo-loop[data-track-sandbox-live]:not([data-tried]) .crest-try-hint, .crest-demo-loop[data-manage-sandbox-live]:not([data-tried]) .crest-try-hint, .crest-demo-loop[data-send-sandbox-live]:not([data-tried]) .crest-try-hint { visibility: visible; }
.crest-demo-note { margin: 0; color: var(--cp-muted); font-size: var(--cp-type-detail); line-height: 1.5; }
[data-try-cue] { position: relative; }
[data-try-cue]::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--cp-primary); border-radius: var(--cp-radius-document); opacity: 0; pointer-events: none; animation: crest-try-cue calc(var(--motion-layout) * 6) var(--motion-ease) 4; }
@keyframes crest-try-cue { from { opacity: 0.85; transform: scale(1); } to { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { [data-try-cue]::after { display: none; } }
/* MIRROR BEGIN (generated by scripts/sync-crest-demo-loops-css.py; do not edit) */
/* from web/pages/invoice.html */
.client-report-root {
    display: grid;
    gap: 12px;
    min-inline-size: 0;
    margin-block-start: var(--cp-gap-out);
    padding-block-start: var(--cp-gap-out);
    border-block-start: 1px solid var(--cp-border);
    color: var(--cp-text);
    font-size: var(--cp-type-body);
}
.client-report-root h2,
.client-report-root p {
    margin: 0;
    overflow-wrap: anywhere;
}
.client-report-root h2 {
    color: var(--cp-ink);
    font-size: var(--cp-type-body);
    font-weight: 700;
    line-height: 1.35;
}
.client-report-root p {
    color: var(--cp-muted);
    font-size: var(--cp-type-body);
    line-height: 1.5;
}
.client-report-root .client-report-detail {
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
}
.client-report-root .client-report-referral {
    margin-block-start: var(--cp-gap-out);
    padding-block-start: var(--cp-gap-in);
    border-block-start: 1px solid var(--cp-border);
    display: grid;
    gap: 6px;
}
.client-report-root .client-report-referral h3 {
    margin: 0;
    color: var(--cp-ink);
    font-size: var(--cp-type-body);
    font-weight: 700;
    line-height: 1.35;
}
.client-report-root .client-report-referral .cp-button {
    justify-self: start;
    margin-block-start: 4px;
}
.client-report-root .payer-report-action {
    justify-self: start;
    inline-size: auto;
}
.client-report-root .payer-report-undo {
    inline-size: auto;
}
.client-report-undo-row {
    justify-self: stretch;
    inline-size: 100%;
}
.client-report-root[aria-busy="true"] {
    cursor: progress;
}
.client-report-root .client-report-error {
    color: var(--cp-danger);
    font-size: var(--cp-type-detail);
    font-weight: 600;
}
.client-report-result-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cp-safe);
}
.client-report-result-heading [data-lucide] {
    inline-size: 20px;
    block-size: 20px;
}
.owner-resting-action .cp-button { inline-size: 100%; }
/* from web/pages/my-invoices.html */
.invoice-lifecycle-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    gap: 0;
    padding: 3px;
    margin-bottom: 0;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-control);
    background: var(--cp-surface-document);
}
.invoice-lifecycle-tab {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--cp-hit-target);
    gap: 6px;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--cp-radius-control);
    background: transparent;
    color: var(--cp-muted);
    font: 400 var(--cp-type-body) / 1.2 var(--body);
    box-shadow: none;
    cursor: pointer;
    transform: none;
}
.invoice-lifecycle-tab[aria-checked="true"] {
    background: var(--cp-primary);
    color: var(--cp-on-color);
}
.invoice-lifecycle-tab[aria-checked="true"] .invoice-lifecycle-tab__count { background: var(--cp-on-color); color: var(--cp-primary); }
.invoice-lifecycle-tab[aria-checked="true"] .invoice-activity-dot { background: var(--cp-on-color); }
@media (forced-colors: active) {
    /* The selected tab is a tint-only fill that forced colors drop; keep it distinct with the system selection pair. */
    .invoice-lifecycle-tab[aria-checked="true"] {
        background: Highlight;
        color: HighlightText;
        forced-color-adjust: none;
    }
    .invoice-lifecycle-tab[aria-checked="true"] .invoice-lifecycle-tab__count { background: HighlightText; color: Highlight; }
    .invoice-lifecycle-tab[aria-checked="true"] .invoice-activity-dot { background: HighlightText; }
    /* With adjustment off the ring would keep the brand teal; name a system colour so it follows the user's palette. */
    .invoice-lifecycle-tab[aria-checked="true"]:focus-visible { outline-color: Highlight; }
}
.invoice-lifecycle-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    padding: 1px 5px;
    border-radius: var(--cp-radius-row);
    background: var(--cp-surface-muted);
    color: var(--cp-text);
    font-size: var(--cp-type-detail);
    font-variant-numeric: tabular-nums;
}
.invoice-register {
    margin-top: 0;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-document);
    background: var(--cp-surface-document);
    color: var(--cp-text);
    overflow: hidden;
    container: owner-register / inline-size;
}
.invoice-register__table,
.invoice-register__table tbody {
    display: block;
    width: 100%;
}
.invoice-register__table thead {
    display: block;
    border-bottom: 1px solid var(--cp-border);
}
.invoice-register__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(9rem, 0.75fr) minmax(0, 1.9fr);
    gap: 12px;
    align-items: center;
    padding: 12px var(--cp-gap-in);
}
.invoice-register__table tbody tr + tr {
    border-top: 1px solid var(--cp-border);
}
.invoice-register__table tr[data-invoice-id] { cursor: pointer; }
@media (any-hover: hover) {
    .invoice-register__table tbody tr:hover {
    background: var(--cp-surface-muted);
}
}
.invoice-register__table th,
.invoice-register__table td {
    min-width: 0;
    padding: 0;
    text-align: left;
    vertical-align: middle;
}
.invoice-register__table th {
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
    font-weight: 400;
}
@container owner-register (max-width: 44rem) {
    .invoice-register__table tbody tr {
        grid-template-columns: minmax(0, 1fr) max-content;
        gap: 8px 12px;
        padding: 12px;
    }
    .invoice-register__table tbody tr:first-child {
        border-start-start-radius: calc(var(--cp-radius-document) - 1px);
        border-start-end-radius: calc(var(--cp-radius-document) - 1px);
    }
    .invoice-register__table td:first-child { grid-column: 1 / -1; }
    .invoice-register__table td:nth-child(2) { grid-column: 1; grid-row: 2; }
    .invoice-register__table td:nth-child(3) { grid-column: 2; grid-row: 2; }
    .invoice-register__table td:nth-child(4) { grid-column: 1; grid-row: 3; }
    .invoice-register__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}
.invoice-register__status {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: 24px;
    align-items: center;
    padding: 3px 6px;
    border: 0;
    border-radius: var(--cp-radius-row);
    background: var(--cp-surface-muted);
    color: var(--cp-ink);
    font-size: var(--cp-type-detail);
    font-weight: 400;
    line-height: 1.2;
}
.invoice-register__status.is-past-due { background: var(--cp-danger); color: var(--cp-on-color); }
.invoice-register__status.is-reported { background: color-mix(in srgb, var(--cp-ink) 12%, var(--cp-surface-document)); color: var(--cp-ink); font-weight: 700; }
.invoice-register__status.is-closed { background: var(--cp-safe); color: var(--cp-on-color); }
.invoice-register__status-icon { flex: 0 0 auto; inline-size: 14px; block-size: 14px; margin-inline-end: 4px; }
.invoice-register__status-icon > svg { inline-size: 100%; block-size: 100%; }
.invoice-register__client {
    display: grid;
    gap: 4px;
    overflow-wrap: anywhere;
}
.invoice-register__client-name {
    color: var(--cp-text);
    font-weight: 400;
}
.invoice-activity-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--cp-safe);
}
.invoice-activity-dot.hidden { display: none; }
.invoice-lifecycle-tab .invoice-activity-dot { order: -1; margin: 0; }
.invoice-register__reference,
.invoice-register__activity {
    color: var(--cp-muted);
    font-size: var(--cp-type-detail);
    overflow-wrap: anywhere;
}
.invoice-register__table .invoice-register__amount,
.invoice-register__table .invoice-register__amount-head {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.invoice-register__amount {
    color: var(--cp-ink);
    font-weight: 700;
    overflow-wrap: normal;
    white-space: nowrap;
}
.invoice-register__open {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--cp-hit-target);
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}
@media (any-hover: hover) {
    .invoice-register__open:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.invoice-register__table tbody tr { position: relative; }
.invoice-register__table tbody tr:last-child {
    border-end-start-radius: calc(var(--cp-radius-document) - 1px);
    border-end-end-radius: calc(var(--cp-radius-document) - 1px);
}
.invoice-register__empty {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: var(--cp-gap-in);
    color: var(--cp-muted);
}
/* MIRROR END */