/* ══════════════════════════════════════════════════════════════════════════
   canon-invoices.css — the Invoices page's own markup, on canon v5.

   The list is a canon renderer (invoices-page.js renderCanonInvoiceFigure and
   renderCanonInvoiceList) drawn almost wholly in canon utilities; this file
   carries what those cannot say:
     · the toolbar the page already has, moved into the canon header on mount;
     · the table's row affordances;
     · what only an invoice has: the payment integrations, retention held, the
       chasing ladder and the chase queue, the new-invoice chooser, multi-day
       billing and the payments ledger.

   The editor's shared skeleton is canon-editor.css, and the document components
   it shares with quotes are canon-doc.css.

   Every rule is scoped to :root.canon-v5 and layered. Brand colours are the
   vendors' own, written as rgb() because stylelint warns on hex in canon files.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── The toolbar: the legacy .list-actions, moved in whole ────────────── */
  /* Moved rather than copied, so listtoolbar.js's Filter and More, every id and
     every inline handler keep working. */
  :root.canon-v5 #invCanonRoot .list-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  :root.canon-v5 #invCanonRoot .list-actions > .btn-primary { order: 9; }
  :root.canon-v5 #invCanonRoot .inv-search {
    box-sizing: border-box; height: 34px; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-card); color: var(--c-text);
    font-family: inherit; font-size: 13px;
  }
  :root.canon-v5 #invCanonRoot .list-actions > input[type="search"].inv-search { width: 240px; }
  :root.canon-v5 #invCanonRoot .inv-search::placeholder { color: var(--c-cap); }
  :root.canon-v5 #invCanonRoot .inv-search:hover { border-color: var(--c-border-2); }
  :root.canon-v5 #invCanonRoot .inv-search:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
  :root.canon-v5 #invCanonRoot .inv-voidtoggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-2); cursor: pointer; }
  :root.canon-v5 #invCanonRoot .inv-voidtoggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-accent); }
  :root.canon-v5 #invCanonRoot .inv-viewswrap { display: inline-flex; align-items: center; gap: 6px; }
  :root.canon-v5 #invCanonRoot .inv-viewswrap .inv-search { max-width: 160px; }

  :root.canon-v5 #invCanonRoot #invInsight:not(:empty) { margin-top: 12px; }

  /* ── The figure ───────────────────────────────────────────────────────── */
  :root.canon-v5 .inv-late:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

  /* ── The table ────────────────────────────────────────────────────────── */
  :root.canon-v5 .inv-row { cursor: pointer; transition: background var(--dur) var(--ease); }
  :root.canon-v5 .inv-row:hover { background: var(--c-card-2); }
  :root.canon-v5 .inv-row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
  :root.canon-v5 .inv-ck input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-accent); cursor: pointer; }
  :root.canon-v5 .inv-act { white-space: nowrap; }

  /* ── Payment integrations: Stripe, Xero, Square ───────────────────────── */
  /* A setup prompt is a card with its vendor's edge; a finished connection is a
     quiet card that opens to say which account and how to leave it. */
  :root.canon-v5 #invCanonRoot .int-banners { display: flex; flex-wrap: wrap; gap: 10px; }
  :root.canon-v5 #invCanonRoot .int-banners:has(> div:not(:empty)) { margin-top: 16px; }
  :root.canon-v5 #invCanonRoot .int-banners > div:empty { display: none; }
  :root.canon-v5 #invCanonRoot .int-banners > div { flex: 1 1 100%; min-width: 0; }
  :root.canon-v5 #invCanonRoot .int-banners > div.is-chip { flex: 1 1 300px; }

  :root.canon-v5 .sb {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); color: var(--c-text-2); font-size: 13px;
  }
  :root.canon-v5 .sb strong { color: var(--c-text); font-weight: 600; }
  :root.canon-v5 .sb-stripe { border-left: 3px solid rgb(99 91 255); }
  :root.canon-v5 .sb-xero { border-left: 3px solid rgb(19 181 234); }
  :root.canon-v5 .sb-square { border-left: 3px solid rgb(0 106 255); }
  :root.canon-v5 .sb-warn {
    border-color: color-mix(in srgb, var(--c-warn) 34%, transparent); border-left: 3px solid var(--c-warn);
    background: color-mix(in srgb, var(--c-warn) 8%, var(--c-card)); color: var(--c-on-wash-warn);
  }
  :root.canon-v5 .sb-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
  :root.canon-v5 .sb .btn-ghost, :root.canon-v5 .sb .btn-primary, :root.canon-v5 .sb .btn-brand { white-space: nowrap; }
  /* The vendor mark sits on white in both themes: the wordmarks are drawn for it. */
  :root.canon-v5 .sb-badge {
    flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px;
    border: 1px solid var(--c-border); border-radius: 7px; background: rgb(255 255 255);
  }
  :root.canon-v5 .sb-badge svg { display: block; height: 16px; width: auto; }

  :root.canon-v5 .sb-chip-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  :root.canon-v5 .sb-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 5px;
    border: 1px solid color-mix(in srgb, var(--c-ok) 32%, transparent); border-radius: 999px;
    background: color-mix(in srgb, var(--c-ok) 10%, transparent); color: var(--c-on-wash-ok);
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--dur) var(--ease);
  }
  :root.canon-v5 .sb-chip:hover { background: color-mix(in srgb, var(--c-ok) 16%, transparent); }
  :root.canon-v5 .sb-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  :root.canon-v5 .sb-chip .sb-badge { padding: 2px 5px; border-radius: 5px; }
  :root.canon-v5 .sb-chip .sb-badge svg { height: 13px; }
  :root.canon-v5 .sb-chip-tick { font-size: 13px; line-height: 1; }
  :root.canon-v5 .sb-chip-chev { flex: none; color: var(--c-muted); transition: transform var(--dur) var(--ease); }
  :root.canon-v5 .sb-chip-wrap.open .sb-chip-chev { transform: rotate(180deg); }
  :root.canon-v5 .sb-chip-body {
    flex: 1 1 100%; display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows var(--dur) var(--ease);
  }
  :root.canon-v5 .sb-chip-wrap.open .sb-chip-body { grid-template-rows: 1fr; visibility: visible; }
  :root.canon-v5 .sb-chip-body-inner {
    overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font-size: 12px; color: var(--c-text-2);
  }
  :root.canon-v5 .sb-chip-body-inner .btn-ghost { white-space: nowrap; flex: none; }
  :root.canon-v5 .sb-chip-wrap:not(.sb-card).open .sb-chip-body-inner {
    padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card);
  }
  /* The connection card (books-v3 markup, which the canon runs under). */
  :root.canon-v5 .sb-chip-wrap.sb-card {
    display: block; border: 1px solid var(--c-border); border-left: 3px solid var(--c-ok); border-radius: 10px;
    background: var(--c-card); overflow: hidden;
  }
  :root.canon-v5 .sb-card .sb-chip {
    display: flex; width: 100%; gap: 12px; min-height: 0; margin: 0; padding: 10px 14px;
    border: 0; border-radius: 0; background: none; color: var(--c-text); text-align: left;
  }
  :root.canon-v5 .sb-card .sb-chip:hover { background: var(--c-card-2); }
  :root.canon-v5 .sb-card .sb-chip .sb-badge { padding: 5px 7px; border-radius: 7px; }
  :root.canon-v5 .sb-card .sb-chip .sb-badge svg { height: 16px; }
  :root.canon-v5 .sb-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
  :root.canon-v5 .sb-card-txt b { font-size: 13px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .sb-card-txt small {
    overflow: hidden; font-size: 12px; font-weight: 500; color: var(--c-on-wash-ok); text-overflow: ellipsis; white-space: nowrap;
  }
  :root.canon-v5 .sb-card.open .sb-chip-body-inner { padding: 10px 14px 12px; border-top: 1px solid var(--c-border); }
  /* Money still inside Stripe. */
  :root.canon-v5 .sb-balance-pill {
    display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 12px; box-sizing: border-box;
    border: 1px solid var(--c-accent-edge); border-radius: 999px; background: var(--c-accent-soft); color: var(--c-on-wash-accent);
    font-size: 12px; font-weight: 600; white-space: nowrap;
  }
  :root.canon-v5 .sb-balance-pill i { font-size: 14px; }
  :root.canon-v5 .sbp-item { display: inline-flex; align-items: center; gap: 5px; }
  :root.canon-v5 .sbp-lbl { font-weight: 500; }
  :root.canon-v5 .sbp-val { font-variant-numeric: tabular-nums; }

  /* Brand buttons: the vendor's colour, the canon's shape. */
  :root.canon-v5 .btn-brand {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; box-sizing: border-box;
    border: 1px solid transparent; border-radius: 6px; color: rgb(255 255 255);
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  :root.canon-v5 .btn-brand:disabled { opacity: .6; cursor: default; }
  :root.canon-v5 .btn-brand:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  :root.canon-v5 .btn-brand svg { display: block; }
  :root.canon-v5 .brand-logo { height: 14px; width: auto; }
  :root.canon-v5 .btn-stripe { background: rgb(99 91 255); }
  :root.canon-v5 .btn-stripe:hover { background: rgb(85 77 240); }
  /* Xero's own #13b5ea is a LIGHT blue: the white label on it measures 2.38:1,
     and the label is the button. Same hue, deepened until white clears AA
     (4.74:1); the white disc mark on top is unchanged, so it still reads as
     Xero at a glance. */
  :root.canon-v5 .btn-xero { background: rgb(11 126 163); }
  :root.canon-v5 .btn-xero:hover { background: rgb(9 106 138); }
  /* Square's near-black keeps an edge, or it vanishes into a dark card. */
  :root.canon-v5 .btn-square { background: rgb(26 26 26); border-color: var(--c-border-2); }
  :root.canon-v5 .btn-square:hover { background: rgb(0 0 0); }
  :root.canon-v5 .btn-xero-ghost, :root.canon-v5 .xero-synced {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; box-sizing: border-box;
    border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  }
  :root.canon-v5 .btn-xero-ghost {
    border: 1px solid color-mix(in srgb, rgb(19 181 234) 40%, transparent); background: color-mix(in srgb, rgb(19 181 234) 10%, transparent);
    color: var(--c-text); cursor: pointer; transition: background var(--dur) var(--ease);
  }
  :root.canon-v5 .btn-xero-ghost:hover { background: color-mix(in srgb, rgb(19 181 234) 18%, transparent); }
  :root.canon-v5 .btn-xero-ghost svg, :root.canon-v5 .xero-synced svg { display: block; height: 16px; width: auto; }
  :root.canon-v5 .xero-synced {
    border: 1px solid color-mix(in srgb, var(--c-ok) 32%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, transparent);
    color: var(--c-on-wash-ok); text-decoration: none;
  }

  /* ── Retention held (feature_progress_claims) ─────────────────────────── */
  :root.canon-v5 .ret-card { margin-top: 16px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); overflow: hidden; }
  :root.canon-v5 .ret-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-border); }
  :root.canon-v5 .ret-head b { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .ret-head span { display: block; max-width: 60ch; margin-top: 2px; font-size: 12px; color: var(--c-muted); }
  :root.canon-v5 .ret-total { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  :root.canon-v5 .ret-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--c-border); }
  :root.canon-v5 .ret-row:last-child { border-bottom: 0; }
  :root.canon-v5 .ret-row.is-due { box-shadow: inset 3px 0 0 var(--c-accent); }
  :root.canon-v5 .ret-main { flex: 1; min-width: 0; }
  :root.canon-v5 .ret-main b { display: block; font-size: 13px; font-weight: 500; color: var(--c-text); }
  :root.canon-v5 .ret-main > span { display: block; font-size: 12px; color: var(--c-muted); }
  :root.canon-v5 .ret-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  :root.canon-v5 .ret-due { font-variant-numeric: tabular-nums; }
  :root.canon-v5 .ret-due.is-due { color: var(--c-on-wash-accent); font-weight: 600; }
  /* Quiet until touched: the date is corrected now and then, not read every time. */
  :root.canon-v5 .ret-dueinput {
    padding: 0 4px; border: 1px solid transparent; border-radius: 4px; background: transparent;
    color: var(--c-muted); font: inherit; font-size: 12px;
  }
  :root.canon-v5 .ret-dueinput:hover, :root.canon-v5 .ret-dueinput:focus { border-color: var(--c-border-2); color: var(--c-text); }

  /* ── The chasing ladder (Settings, feature_dunning_ladder) ────────────── */
  :root.canon-v5 .ladder-card { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-sunken); }
  :root.canon-v5 .ladder-head b { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .ladder-head .hint { display: block; max-width: 62ch; margin-top: 2px; font-size: 12px; color: var(--c-muted); }
  :root.canon-v5 .ladder-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  :root.canon-v5 .ladder-row select { flex: 1 1 0; min-width: 0; }
  :root.canon-v5 .ladder-foot { display: flex; gap: 14px; margin-top: 10px; }
  :root.canon-v5 .ladder-foot .link {
    padding: 0; border: 0; background: none; color: var(--c-on-wash-accent);
    font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  }
  :root.canon-v5 .ladder-foot .link:hover { text-decoration: underline; text-underline-offset: 2px; }
  :root.canon-v5 .ladder-summary { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border); }
  :root.canon-v5 .ladder-summary b { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
  :root.canon-v5 .ladder-summary ol { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .ladder-summary li { margin-bottom: 2px; }

  /* ── The chase queue (books/chase-queue.js; its own CSS skipped) ──────── */
  :root.canon-v5 .bk-modal.cq-modal { max-width: 640px; }
  :root.canon-v5 .cq-lead { margin: -4px 0 14px; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .cq-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-border); }
  :root.canon-v5 .cq-main { flex: 1; min-width: 0; }
  :root.canon-v5 .cq-name { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  :root.canon-v5 .cq-sub { margin-top: 3px; font-size: 12px; color: var(--c-muted); }
  :root.canon-v5 .cq-amt { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  :root.canon-v5 .cq-act { flex: none; min-width: 104px; text-align: right; }
  :root.canon-v5 .cq-chip {
    display: inline-block; margin-left: 6px; padding: 0 7px; vertical-align: 1px;
    border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-sunken);
    font-size: 11px; font-weight: 500; color: var(--c-muted);
  }
  :root.canon-v5 .cq-done { font-size: 13px; font-weight: 600; color: var(--c-on-wash-ok); white-space: nowrap; }
  :root.canon-v5 .cq-fail { font-size: 12px; font-weight: 600; color: var(--c-on-wash-warn); }
  :root.canon-v5 .cq-none { font-size: 12px; color: var(--c-muted); }
  :root.canon-v5 .cq-empty { padding: 22px 0; text-align: center; color: var(--c-muted); }

  /* ── New invoice: how to start, and what to start from ────────────────── */
  :root.canon-v5 .ni-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  :root.canon-v5 .ni-choice {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; box-sizing: border-box;
    border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-card); color: var(--c-text);
    font-family: inherit; text-align: left; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  :root.canon-v5 .ni-choice:hover { background: var(--c-card-2); border-color: var(--c-border-2); }
  :root.canon-v5 .ni-choice:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
  :root.canon-v5 .ni-choice > i { flex: none; font-size: 20px; color: var(--c-accent); }
  :root.canon-v5 .ni-choice-t { font-size: 13px; font-weight: 600; }
  :root.canon-v5 .ni-choice-s { margin-top: 2px; font-size: 12px; color: var(--c-muted); }
  :root.canon-v5 .bk-items { display: flex; flex-direction: column; gap: 6px; }
  :root.canon-v5 .bk-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px; }
  :root.canon-v5 .bk-item > div { flex: 1; min-width: 0; }
  :root.canon-v5 .bk-item-title { font-size: 13px; font-weight: 600; }
  :root.canon-v5 .bk-item-meta { margin-top: 2px; font-size: 12px; color: var(--c-muted); }
  :root.canon-v5 .bk-modal .muted, :root.canon-v5 #invCanonRoot .muted { color: var(--c-muted); }

  /* The "Bill more than one day?" chooser moved to canon-multiday.css — the
     dispatch board raises drafts through the same modal (doc-from-job.js). */

  :root.canon-v5 .inv-days { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-sunken); }
  :root.canon-v5 .inv-days-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted);
  }
  :root.canon-v5 .inv-days-add {
    display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 4px; border: 0; background: none;
    color: var(--c-on-wash-accent); font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer;
  }
  :root.canon-v5 .inv-days-add:hover { text-decoration: underline; text-underline-offset: 2px; }
  :root.canon-v5 .inv-days-list { margin: 6px 0 0; padding: 0; list-style: none; }
  :root.canon-v5 .inv-day { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .inv-day:first-child { border-top: 0; }
  :root.canon-v5 .inv-day > i { flex: none; font-size: 14px; color: var(--c-muted); }
  :root.canon-v5 .inv-day-when { flex: none; font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; }
  :root.canon-v5 .inv-day-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root.canon-v5 .inv-day-x {
    flex: none; margin-left: auto; padding: 3px 6px; border: 0; border-radius: 6px; background: none;
    color: var(--c-muted); cursor: pointer;
  }
  :root.canon-v5 .inv-day-x:hover { background: var(--c-card-2); color: var(--c-danger); }

  /* ── The payments ledger, under the totals and in the drawer ──────────── */
  :root.canon-v5 .ed-payments { width: 340px; max-width: 100%; margin: 0 0 4px auto; }
  :root.canon-v5 .nd-drawer .ed-payments { width: 100%; margin: 14px 0 0; }
  :root.canon-v5 .ed-payments .lbl { margin: 0 0 6px; }
  :root.canon-v5 .ed-payments .pay-row {
    display: flex; align-items: baseline; gap: 12px; padding: 6px 0;
    border-top: 1px solid var(--c-border); font-size: 13px; color: var(--c-text-2);
  }
  :root.canon-v5 .ed-payments .pay-when { color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  :root.canon-v5 .ed-payments .pay-method { flex: 1; min-width: 0; }
  :root.canon-v5 .ed-payments .pay-amt { font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  :root.canon-v5 .ed-payments .x {
    padding: 0 4px; border: 0; background: none; color: var(--c-muted); font-size: 18px; line-height: 1; cursor: pointer;
  }
  :root.canon-v5 .ed-payments .x:hover { color: var(--c-danger); }

  /* ── Singles ──────────────────────────────────────────────────────────── */
  :root.canon-v5 .ai-btn { display: inline-flex; align-items: center; gap: 5px; }
  :root.canon-v5 .ai-btn .ti-sparkles { color: var(--c-accent); }
  /* The NDIS agency-managed marker carries its own colours inline. */
  :root.canon-v5 #editorView .badge { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
  /* The amount-due panel: layout-v3's rail, which only exists with the v2 editor off. */
  :root.canon-v5 .doc-due { border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); }
  :root.canon-v5 .doc-due .panel-b { padding: 20px; }
  :root.canon-v5 .due-big { display: block; margin-top: 8px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  :root.canon-v5 .due-big.bad { color: var(--c-danger); }
  :root.canon-v5 .due-sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--c-muted); }
  :root.canon-v5 .due-big.bad + .due-sub { color: var(--c-on-wash-danger); }

  /* ── The redesign's layout (feature_polish_invoices, #invCanonRoot.inv-polish) ──
     The balance card and its side list are shared with Quotes, in canon-doc.css (.bk-polish).
     What only Invoices has stays here: the caption, the quiet connections line. */
  :root.canon-v5 #invCanonRoot.inv-polish #invCap[hidden] { display: none; }

  /* The connections, as one quiet line under the card. A warning or a setup step
     keeps its full banner; it is something to do, not something to know. */
  :root.canon-v5 #invCanonRoot.inv-polish .int-banners { gap: 6px 20px; align-items: center; }
  :root.canon-v5 #invCanonRoot.inv-polish .int-banners:has(> div:not(:empty)) { margin-top: 12px; }
  :root.canon-v5 #invCanonRoot.inv-polish .int-banners > div.is-chip { flex: none; max-width: 100%; }
  /* Shut, the detail takes no room: a quiet item is as wide as its words, and the
     hidden detail's long line would otherwise set that width (1132px on a phone). */
  :root.canon-v5 .inv-polish .sb-quiet:not(.open) > .sb-chip-body { display: none; }
  :root.canon-v5 #invCanonRoot.inv-polish .int-banners > div.is-chip:has(.sb-chip-wrap.open) { flex: 1 1 100%; }
  :root.canon-v5 .inv-polish .sb-quiet > .sb-chip {
    gap: 7px; min-height: 28px; padding: 2px 4px; border: 0; border-radius: 6px; background: none;
    color: var(--c-text-2); font-size: 13px; font-weight: 400;
  }
  :root.canon-v5 .inv-polish .sb-quiet > .sb-chip:hover { background: var(--c-card-2); }
  :root.canon-v5 .inv-polish .sb-q-ok { color: var(--c-on-wash-ok); font-weight: 500; }
  :root.canon-v5 .inv-polish .sb-q-note::first-letter { text-transform: uppercase; }
  :root.canon-v5 .inv-polish .sb-quiet-link {
    min-height: 28px; padding: 2px 4px; border: 0; border-radius: 6px; background: none;
    color: var(--c-accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  }
  :root.canon-v5 .inv-polish .sb-quiet-link:hover { text-decoration: underline; }
  :root.canon-v5 .inv-polish .sb-quiet-link .brand-logo { display: none; }


  /* ── Phone ────────────────────────────────────────────────────────────── */
  @media (max-width: 720px) {
    /* Nine statuses do not fit a phone's width and a segmented control cannot
       wrap: it takes its own row and scrolls sideways inside itself. */
    :root.canon-v5 #invSeg { flex: 1 1 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    :root.canon-v5 #invSeg::-webkit-scrollbar { display: none; }
    :root.canon-v5 #invSeg button { flex: none; white-space: nowrap; }
    /* The toolbar's phone layout is the shared list header's (canon-doc.css .bk-head). */
    :root.canon-v5 .sb { flex-wrap: wrap; }
    :root.canon-v5 .sb-lead { flex: 1 1 100%; }
    :root.canon-v5 .ret-row, :root.canon-v5 .ladder-row, :root.canon-v5 .cq-row { flex-wrap: wrap; }
    :root.canon-v5 .ret-main, :root.canon-v5 .ladder-row select { flex: 1 1 100%; }
    :root.canon-v5 .cq-act { width: 100%; min-width: 0; text-align: left; }
    :root.canon-v5 .ed-payments { width: 100%; }
  }
}