/* commerce: styles for this area only. Tokens only (castomo-dashkit rule 4: no colour literal outside 00-tokens.css), logical properties only. */

/* The three tabs (Billing, Products, Offers) are drawn after the page was, so the blocks keep their own rhythm. */
.commerce-tab { min-inline-size: 0; }

/* A currency heading above its row of tiles when a company was sold to in more than one. */
.commerce-currency { font-size: var(--t1); color: var(--ink-2); }

/* ------------------------------------------------------------------ a sale, a product: one block per thing, set apart by a rule */

.commerce-sale { display: grid; gap: var(--s1); min-inline-size: 0; padding-block-start: var(--s3); border-block-start: var(--rule-w) solid var(--rule); }
.commerce-sale:first-child { padding-block-start: 0; border-block-start: 0; }
.commerce-sale[data-state="cancelled"] { opacity: .7; }
.commerce-sale[data-state="cancelled"] h3 { text-decoration: line-through; text-decoration-color: var(--rule-strong); }
.commerce-sale-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s0) var(--s2); }
.commerce-sale-head h3 { flex: 1 1 24ch; min-inline-size: 0; font-size: var(--t1); overflow-wrap: anywhere; }
.commerce-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* References are read aloud to one another on the phone; tabular figures keep 2026-0001 and 2026-0007 apart. */
.commerce-ref { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }
.commerce-overdue { color: var(--bad); font-weight: 650; }

/* An invoice table sits inside the sale's block, edge to edge of the block, not boxed in again. */
.commerce-sale .table-scroll { margin-inline: calc(-1 * var(--s1)); }
.commerce-sale .table th, .commerce-sale .table td { padding-inline: var(--s1); }
.commerce-tab .table td .btn-row { flex-wrap: wrap; }
/* A cell with nothing to press (a paid invoice's actions) would be a bare column name once the rows are cards. Switches at the kit's table step (720). */
@media (max-width: 720px) { .commerce-tab .table td:empty { display: none; } }

/* The list of change requests, versions and suggestions: a row may wrap its buttons under its words. */
.commerce-list > li { flex-wrap: wrap; }
.commerce-list .list-main { flex: 1 1 24ch; }
.commerce-list .list-main small { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ the invoicing details card */

.commerce-lines { color: var(--ink-2); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ an offer */

.commerce-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s2); }
.commerce-order-head h2 { flex: 1 1 24ch; min-inline-size: 0; font-size: var(--t2); overflow-wrap: anywhere; }

/* Seven steps are a long list: the finished ones and the ones ahead stay one tight line, the current one opens. */
.commerce-arc > li:not([data-state="current"]) { padding-block: var(--s0); }
.commerce-arc > li:not([data-state="current"]) .step-body b { font-weight: 550; }
.commerce-arc > li:not([data-state]) .step-body b { color: var(--ink-3); }
.commerce-cancel { margin-block-start: var(--s2); }

/* The totals under the lines read as a plain definition list, a little off the table above them. */
.commerce-facts { margin-block-start: var(--s3); }

/* The confirmation is a document: it keeps its own measure rather than stretching across a wide card. */
.commerce-document { display: grid; gap: var(--s2); max-inline-size: 72ch; }
.commerce-document h3 { font-size: var(--t1); }