/* Quarry ERP mockup — sales.css (SALES builder). Module-only rules; everything else reuses app.css tokens and components. */

.nowrap { white-space: nowrap; }
.sale-no, .sale-ctx__no .mono { font-size: inherit; }   /* .mono's .95em would make 13.3 px: stay on the type ramp */
.sale-no { font-weight: 600; white-space: nowrap; }
.sale-method { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sale-btn--danger { color: var(--danger); }
.sale-head-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* ---- list (R6 §3.6): page header toolbar (search + filter pills), stat strip, rows on the phone, the table on desktop */
.sale-head__new { display: none; }   /* phone: the centre Record button records a sale */
.sale-search { font-size: 16px; }
@media (max-width: 719px) { .ph__toolbar > .sale-search { flex-basis: 100%; } }   /* §3.6.1: the search is full width on the phone */
.sale-rows .lrow__meta > span:not(.lrow__dot), .sale-q .lrow__meta > span:not(.lrow__dot) { white-space: nowrap; }   /* "Special 450" never splits */
.sale-fp--desk { display: none; }
.sale-brseg .seg { flex-wrap: nowrap; }
@media (min-width: 720px) {
  .sale-head__new { display: inline-flex; }
  .sale-fp--phone { display: none; }
  .sale-fp--desk { display: inline-flex; }
}
/* R8 L1: the ONE status control (Q.ui.segmented, 48 px options). A phone scrolls it sideways and Q.ui.revealTabs keeps
   the selected option in view (data-reveal; the edge fade is app.css). The padding leaves room for the focus ring,
   which overflow would otherwise clip. No transition: it is switched many times a day. */
.sale-status { margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) var(--s-2); padding: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.sale-status::-webkit-scrollbar { display: none; }
.sale-status .seg { flex-wrap: nowrap; max-width: none; }
.sale-status .seg__btn { min-height: var(--tap); min-width: var(--tap); padding-inline: var(--s-3); }
.sale-status .seg__sub { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* the filter sheet (Q.ui.sheet with the .fsheet option grammar): one group per filter */
.sale-fs { display: grid; gap: var(--s-4); }
.sale-fs__group { display: grid; gap: var(--s-1); }
.sale-fs__label { margin: 0; font: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sale-fs__week { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.sale-fs__week .btn { min-width: var(--tap); min-height: var(--tap); padding: 0; justify-content: center; }
.sale-fs__wk { text-align: center; font: var(--t-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.sale-fs .sale-filters__range { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); margin-top: var(--s-2); }
.sale-note { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0 0 var(--s-4); font: var(--t-meta); color: var(--ink-2); max-width: 75ch; }
.sale-note > .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.sale-totals { margin-bottom: var(--s-4); }
.sale-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); }
/* desktop table: 56 px rows, tabular figures, the header sticks under the top bar (no sideways scroller at 1280) */
.sale-table .tcards { display: none; }
.sale-table .table td { vertical-align: middle; height: 56px; padding-block: var(--s-2); }
.sale-table .table { font: var(--t-meta); }
.sale-table .table th, .sale-table .table td { padding-inline: var(--s-2); }
.sale-table .table td .num, .sale-table .table td.ta-right { font-variant-numeric: tabular-nums; }
@media (min-width: 1280px) {
  .sale-table .tbl-wrap { overflow: clip; }
  .sale-table .table thead th { position: sticky; top: var(--stick-top); z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
}
/* phone: hairline rows grouped by day (Q.ui.groupedList) */
.sale-rows { display: none; }
@media (max-width: 719px) {
  .sale-table { display: none; }
  /* R8: one white group per day (Q.ui.groupedList), the day named once above its rows */
  .sale-rows { display: grid; gap: var(--s-4); margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); }
  .sale-rows .glist__box { border-inline: 0; border-radius: 0; }   /* full-bleed: the row keeps plate, number and total on one line */
  .sale-rows .glist__label { padding-inline: var(--gutter-l) var(--gutter-r); }
  .sale-rows .lrow { padding-inline: var(--s-4); }   /* §2 list row: 16 px side padding */
}
.sale-rows .lrow .plate, .sale-q .lrow .plate { font-size: 14px; }
.sale-rows .lrow__title, .sale-q .lrow__title { font: var(--t-meta); font-weight: 600; }   /* the number reads as a code beside the plate */
.sale-rows .lrow__end .stxt { font-size: 13px; }

/* ---- approval queue (owner, R6 §3.6.5): compact rows; Approve + Reject side by side; one sticky "Approve selected" bar */
.sale-qhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-4); margin-bottom: var(--s-2); }
.sale-qhead .sale-note { margin: 0; }
.sale-selall { min-height: var(--tap); }
.sale-queue { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.sale-q { display: grid; gap: var(--s-1); padding: var(--s-2) var(--s-4) var(--s-3) 0; min-width: 0; }
.sale-q + .sale-q { border-top: 1px solid var(--line); }
.sale-q__head { display: flex; align-items: center; min-width: 0; }
.sale-q__pick { flex: none; justify-content: center; min-width: var(--tap); min-height: var(--tap); margin-inline-start: var(--s-1); }
.sale-q__row { flex: 1; min-width: 0; }
.sale-q__row .lrow { padding-inline: var(--s-1) 0; min-height: 64px; }
.sale-q__more, .sale-q__flags, .sale-q__actions { margin-inline-start: var(--s-4); }
.sale-q__more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap); cursor: pointer; list-style: none; }
.sale-q__more > summary::-webkit-details-marker { display: none; }
.sale-q__dt { display: inline-flex; align-items: center; gap: var(--s-1); flex: none; font: var(--t-meta); font-weight: 600; color: var(--accent-text); }
.sale-q__dt .ic { transition: transform var(--d-fast) var(--ease-out); }
.sale-q__more[open] .sale-q__dt .ic { transform: rotate(180deg); }
.sale-q__body { display: grid; gap: var(--s-2); padding-bottom: var(--s-2); }
.sale-q__flags { display: grid; gap: var(--s-2); }
.sale-q__notes { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.sale-q__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.sale-q__actions .btn { justify-content: center; }
@media (max-width: 719px) {
  /* full-bleed on the phone (like the sale rows) so a row keeps its plate, number and total on one line */
  .sale-queue { margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); border-inline: 0; border-radius: 0; }
}
.sale-bulk[hidden] { display: none; }
@media (min-width: 720px) {
  /* desktop: one line per sale, the Approve / Reject pills in the last column; the payment line and flags under it */
  .sale-q { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head act" "more more" "flags flags"; align-items: center; column-gap: var(--s-4); }
  .sale-q__head { grid-area: head; } .sale-q__more { grid-area: more; } .sale-q__flags { grid-area: flags; }
  .sale-q__actions { grid-area: act; display: flex; margin: 0; }
  .sale-q__actions .btn { min-width: 128px; }
  .sale-q__more, .sale-q__flags { margin-inline-start: calc(var(--tap) + var(--s-1) + var(--s-1)); }
  .sale-q__flags { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
html.no-motion .sale-q__dt .ic { transition: none; }   /* R10: the system setting OR Settings › Reduce motion */

/* lines table (queue + detail) */
.sale-lines-wrap { overflow-x: auto; }
.sale-lines { width: 100%; border-collapse: collapse; font-size: 14px; }   /* --t-meta size (R6 §1.1) */
.sale-lines th, .sale-lines td { padding: 8px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.sale-lines thead th { font: var(--t-label); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sale-lines th.ta-right, .sale-lines td.ta-right { text-align: right; }
.sale-lines tfoot > tr > * { border-bottom: 0; border-top: 2px solid var(--line-strong); font-weight: 700; }
.sale-price--diff { color: var(--warn); font-weight: 700; }
.sale-diff-tag { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-1); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---- record sale (R6 §3.2): task mode. Q.ui.taskHeader on top, groups TRUCK → STONE → PAYMENT → More details, ONE
   primary in Q.ui.actionBar (.sale-bar). Phone: one column, the bar sticky at the bottom edge. Desktop: a 640 px form
   column, left-aligned, + a 320 px summary column (lines, total, the one primary) that sticks under the top bar. */
/* the task header sticks under the top bar, so a focused field must clear both (WCAG 2.4.11) */
html.is-task:has(.sale-entry) { scroll-padding-top: calc(var(--stick-top) + 56px + var(--s-4)); }
.sale-entry > .inotice { margin-bottom: var(--s-3); }
.sale-form { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.sale-main { display: grid; gap: var(--s-6); min-width: 0; }
/* the error summary slot takes no row (and no grid gap) until there is something to say; its notice carries role="alert" (ENT-01) */
.sale-main > #sf-summary:empty { display: none; }
.sale-form .notice > span, .sale-entry .notice > span { min-width: 0; }

.sale-grp { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.sale-grp__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0; padding: 0; font: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sale-grp__sub { font: var(--t-meta); letter-spacing: 0; text-transform: none; }
/* a fieldset's legend is not a grid item: give it the same space below as the other groups' labels */
legend.sale-grp__label { float: left; width: 100%; margin-bottom: var(--s-3); }
legend.sale-grp__label + * { clear: both; }
.sale-stone > .field__error:empty { display: none; }

.sale-lastsaved { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-2); min-height: var(--tap); margin-bottom: var(--s-4); padding: 0 var(--s-1) 0 var(--s-3); border-radius: var(--r-input); background: var(--info-soft); font: var(--t-meta); }
.sale-lastsaved--ok { background: var(--ok-soft); }
.sale-lastsaved__ic { flex: none; color: var(--info); } .sale-lastsaved--ok .sale-lastsaved__ic { color: var(--ok); }
.sale-lastsaved__txt { flex: 1 1 200px; min-width: 0; margin: 0; padding-block: var(--s-2); }
.sale-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-1); border: 0; background: none; color: var(--accent-text);
  font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation;
}
.sale-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); margin: 0; font: var(--t-meta); font-size: 16px; color: var(--ink-2); }
.sale-ctx__item { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; }
.sale-ctx__item strong { color: var(--ink); }
.sale-ctx__no { flex-basis: 100%; min-height: 0; font-size: 14px; color: var(--ink-3); }
.sale-time { display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-input); background: var(--surface-3); }
.sale-time .sale-link { justify-self: start; }
.sale-time[hidden], #sf-late:empty, #sf-hint:empty, #sf-override:empty { display: none; }
.sale-branch .seg { width: 100%; }

.sale-plate .field__label { font: var(--t-h3); color: var(--ink); }
.sale-plate .input--xl { min-height: 64px; font: var(--t-key); font-family: var(--font-mono); letter-spacing: .08em; padding-inline: var(--s-4); }
/* the plate example is large text (3:1): a lighter token than typed text so an empty box never reads as filled in */
.sale-plate .input--xl::placeholder { letter-spacing: .08em; color: var(--line-strong); }
.sale-plate .field__error:empty { display: none; }
.sale-hint { display: grid; gap: var(--s-2); }
.sale-hint__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; }
.sale-useplate { font-family: var(--font-mono); }

/* grade cards: one control height (56) for −/+, the pieces field and the quick chips */
.sale-stone { gap: 0; }
.sale-lines-form { display: grid; gap: var(--s-3); }
.sale-line { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color var(--d-fast) var(--ease-out); }   /* R10 A8: the ring (box-shadow) changes at once, never animated */
.sale-line.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sale-line .stepper__label > span:first-child { font: var(--t-h3); }
.sale-line .stepper__row { grid-template-rows: 56px; }
.sale-line .stepper__btn, .sale-line .stepper__input { height: 56px; min-height: 56px; padding-block: 0; }
.sale-line .stepper__chip { height: 56px; min-height: 56px; font-size: 16px; }
.sale-line__sum { justify-self: end; margin: 0; font: var(--t-meta); color: var(--ink-2); }
.sale-line__sum[hidden] { display: none; }
.sale-line .field__error:empty { display: none; }

.sale-more-d > summary { font-weight: 600; color: var(--ink-2); }
.sale-more-d__body { display: grid; gap: var(--s-4); padding-top: var(--s-3); }
.sale-prices { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-2); }
.sale-prices legend { padding: 0; }
.sale-prices__grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.sale-prices__note { display: flex; align-items: center; gap: var(--s-2); }
.sale-next { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); }   /* R8: a next step with no button sits with the status */
.sale-by { margin: calc(-1 * var(--s-3)) 0 0; }

/* the one bar: label + total left, the one primary right (56 px: the main entry control height) */
.sale-bar .abar__btn { min-height: 56px; }
.sale-bar .abar__total { font: var(--t-h2); }
.sale-why { max-width: 24ch; }
.sale-save[aria-busy="true"]:not(.is-done) { opacity: .7; }
.sale-side__label, .sale-sumlines { display: none; }
@media (max-width: 719px) {
  .sale-side { display: contents; }   /* the bar becomes the form's own child, so it sticks to the bottom over the whole form */
  .sale-form { gap: 0; }
  .sale-form > .sale-side > .sale-bar { margin-top: var(--s-6); }
}
@media (min-width: 720px) {
  .sale-form { grid-template-columns: minmax(0, 640px) 320px; justify-content: start; column-gap: var(--s-2); }   /* 640 + 8 + 320 = the 968 px content width at 1280 */
}
@media (min-width: 1360px) {
  .sale-form { column-gap: var(--s-6); }
}
@media (min-width: 720px) {
  .sale-entry > .inotice, .sale-entry > #sf-saved { max-width: 640px; }
  .sale-side {
    position: sticky; top: calc(var(--stick-top) + 56px + var(--s-4)); display: grid; gap: var(--s-3);
    padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  }
  .sale-side__label { display: block; margin: 0; font: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
  .sale-sumlines { display: grid; margin: 0; padding: 0; list-style: none; }
  .sale-sumline { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-block: var(--s-2); border-bottom: 1px solid var(--line); font: var(--t-meta); }
  .sale-sumline > span:first-child { display: grid; font-weight: 600; color: var(--ink); }
  .sale-sumline__sub { font-weight: 400; color: var(--ink-3); }
  .sale-sumline--none { color: var(--ink-3); }
  /* inside the summary card the bar is not a floating card of its own: total over a full-width primary */
  .sale-side .sale-bar { position: static; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .sale-side .abar__in { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .sale-side .abar__btn { width: 100%; min-width: 0; }
  .sale-side .sale-why { max-width: none; }
  html.is-task:has(.sale-entry) .view { padding-bottom: var(--s-8); }
}
@media (max-width: 379px) {
  .sale-entry--new .sale-ctx__word { display: none; }   /* ENT-01: keeps branch · time · Change time on one row at 360 */
  .sale-line { padding: var(--s-3) var(--s-2) var(--s-2); }
  .sale-line .stepper__row { grid-template-columns: 56px minmax(0, 1fr) 56px; gap: var(--s-2); }
  .sale-line .stepper__chips { gap: var(--s-2); }
}

@media (max-width: 719px) {
  .sale-lines { font-size: 14px; }
  .sale-lines th, .sale-lines td { padding: var(--s-2) var(--s-1); }
}

/* paid in full (a fact, not an action) */
.sale-paid { display: flex; align-items: flex-start; gap: var(--s-1); font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sale-paid > .ic { flex: none; margin-top: 2px; color: var(--ok); }
.sale-paid > span { min-width: 0; }
.sale-paid--big { font-size: 16px; }
.sale-paylines { display: grid; gap: 6px; }
.sale-payline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: 14px; }   /* --t-meta size (R6 §1.1) */
.sale-payline .num { margin-left: auto; font-weight: 600; }
.sale-payline__acc { flex-basis: 100%; }
.sale-sum__total { display: grid; gap: 2px; }
.sale-sum__total strong { font: 600 28px/1.15 var(--font-cond); }

/* ---- reject sheet */
.sale-reasons { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.sale-reasons legend { padding: 0; margin-bottom: 6px; }
.sale-reason { padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-2); }
.sale-reason input { accent-color: var(--danger-strong); }

/* modal spacing (kept from v1: other modules' sheets rely on it, sales.css loads on every page) */
.modal .form-grid { margin: 16px 0; align-items: start; }
.modal .field + .field { margin-top: 14px; }
.modal .form-grid > .field { margin-top: 0; }

/* ---- detail */
.sale-detail { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main" "act"; align-items: start; }
.sale-detail__main { grid-area: main; } .sale-detail__side { grid-area: side; } .sale-detail__act { grid-area: act; min-width: 0; }
@media (min-width: 1024px) { .sale-detail { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); grid-template-areas: "main side" "main act"; grid-template-rows: auto 1fr; } }
.sale-detail__visits { display: flex; gap: 6px; align-items: center; margin-top: 12px; }
.sale-detail .kv dd .plate { font-size: 16px; }
.sale-detail .card__head, .sale-queue .card__head { flex-wrap: wrap; }
.sale-actions .btn--block { justify-content: center; }
.sale-sum .card__body { display: grid; gap: 10px; }
.sale-sum .sale-paid { padding: 10px 12px; border-radius: var(--r-2); background: var(--ok-soft); }

.sale-stack { display: flex; flex-direction: column; gap: 2px; }
.sale-lines__size { display: block; }
.sale-lines td.num { white-space: nowrap; }
.sale-col-list-alt { display: none; }
@media (max-width: 559px) {
  .sale-col-list { display: none; }
  .sale-diff-tag { white-space: normal; justify-content: flex-end; flex-wrap: wrap; }
  .sale-lines thead th { letter-spacing: .02em; }
  .sale-lines th, .sale-lines td { padding: 8px 4px; }
  .sale-lines th:first-child, .sale-lines td:first-child { padding-left: 0; }
  .sale-lines th:last-child, .sale-lines td:last-child { padding-right: 0; }
  .sale-detail .card__body { padding: 12px 14px 16px; }
  .sale-col-list-alt { display: inline; }
}
/* R4 §C: "Change time", the quick-pick and the other text links are 48 px on touch */
@media (pointer: coarse) { .sale-link, .sale-q__pick { min-height: var(--tap); } .sale-q__pick { min-width: var(--tap); } }

/* ---- R9 §5: the owner's Commission card on the daily model — one line per claim (day · shift · person · pieces) */
.sale-com { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; }
.sale-com__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); padding-block: var(--s-2); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sale-com__line:last-child { border-bottom: 0; }
.sale-com__txt { min-width: 0; overflow-wrap: anywhere; }
.sale-com__two { margin: 0 0 var(--s-3); }
.sale-com__open { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--s-1); }

/* ================================================================== R10 "Cut Stone" (slice home, DESIGN-SPEC §8.2–§8.3)
   (the Record sheet's R10 geometry lives with the .rec-sheet rules in app.css) */
/* §8.2 a blocked save: the message rises in (Y −4 → 0 + fade, --d-tick); the field border is already --danger, at once.
   Nothing shakes. */
.sale-form .field__error:not(:empty) { animation: sale-err-in var(--d-tick) var(--ease-out) both; }
@keyframes sale-err-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
html.no-motion .sale-form .field__error:not(:empty) { animation: q-fade 120ms linear both; }

/* §8.3 the fresh highlight (Q.motion.enter {fresh}) sits under the row's text, never over it */
.sale-rows li, .sale-table td { isolation: isolate; }
:is(.sale-rows, .sale-table) .q-fresh { z-index: -1; }

/* ================================================================== R11.1 concept A ("Control Room") — Sales.
   Everything below is scoped under html[data-concept="a"]; the default design never matches it. Tokens are concept-a.css's. */
html[data-concept="a"] .sca-band { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
html[data-concept="a"] .sca-kpis .ca-kpi { min-height: 132px; }
html[data-concept="a"] .sca-charts { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { html[data-concept="a"] .sca-charts { grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); } }
@media (max-width: 719px) {
  html[data-concept="a"] .sca-kpis .ca-kpi:not(.ca-kpi--lead) { min-height: 0; padding-bottom: 12px; }
  html[data-concept="a"] .sca-kpis .ca-kpi:not(.ca-kpi--lead) .ca-kpi__spark { display: none; }
  html[data-concept="a"] .sca-kpis .ca-kpi:not(.ca-kpi--lead) .ca-kpi__value { --kv: 20px; line-height: 26px; }
  html[data-concept="a"] .sca-kpis .ca-kpi--lead { min-height: 0; }
  html[data-concept="a"] .sca-charts > .sca-hours { display: none; }
  html[data-concept="a"] .sca-kpis > .ca-kpi[data-kpi="await"]:nth-child(4) { grid-column: 1 / -1; min-height: 0; }
  html[data-concept="a"] .sca-days .sca-days__bars { height: 112px; }
  html[data-concept="a"] .sca-kpis .ca-kpi--lead .ca-kpi__spark { height: 32px; }
  html[data-concept="a"] .sale-rows .lrow__end .stxt { height: auto; padding: 0; background: none !important; font-size: 12px; }
  html[data-concept="a"] .sale-rows .lrow__meta .sca-pb { width: 24px; }
}
/* R11.2: a phone opens on the sales, not on the band. At ≤ 600 px the four figures are one compact row that scrolls
   sideways (no sparklines, sub-lines or by-day chart: the chart is on Home and Reports), so the first sale row shows on
   a 360 × 780 screen under the search, the filter, the status control and the totals line. */
@media (max-width: 600px) {
  html[data-concept="a"] .sca-band { gap: 0; margin: 0 calc(-1 * var(--gutter-r)) var(--s-3) calc(-1 * var(--gutter-l)); }
  html[data-concept="a"] .sca-band .sca-kpis { display: flex; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px var(--gutter-r) 4px var(--gutter-l); scroll-padding-inline: var(--gutter-l) var(--gutter-r); }
  html[data-concept="a"] .sca-band .sca-kpis::-webkit-scrollbar { display: none; }
  html[data-concept="a"] .sca-band .sca-kpis > .ca-kpi, html[data-concept="a"] .sca-band .sca-kpis > .ca-kpi--lead,
  html[data-concept="a"] .sca-band .sca-kpis > .ca-kpi[data-kpi="await"]:nth-child(4) { flex: 0 0 150px; grid-column: auto; min-height: 0; padding: 8px 12px 10px; gap: 2px; scroll-snap-align: start; background: var(--surface); }
  html[data-concept="a"] .sca-band .sca-kpis > .ca-kpi--lead { flex-basis: 184px; }
  html[data-concept="a"] .sca-band .sca-kpis .ca-kpi__spark, html[data-concept="a"] .sca-band .sca-kpis .ca-kpi__meta { display: none; }
  html[data-concept="a"] .sca-band .sca-kpis .ca-kpi__head { min-height: 16px; }
  html[data-concept="a"] .sca-band .sca-kpis .ca-kpi__label { font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-concept="a"] .sca-band .sca-kpis .ca-kpi .ca-kpi__value, html[data-concept="a"] .sca-band .sca-kpis .ca-kpi--lead .ca-kpi__value { --kv: 19px; line-height: 24px; }
  html[data-concept="a"] .sca-band .sca-charts { display: none; }
}
/* by-day bars */
html[data-concept="a"] .sca-days__plot { position: relative; padding-top: 18px; }
html[data-concept="a"] .sca-days__max { position: absolute; top: 0; left: 0; font-size: 11px; line-height: 14px; color: var(--ca-axis); }
html[data-concept="a"] .sca-days__plot::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; border-top: 1px dashed var(--ca-grid); }
html[data-concept="a"] .sca-days__bars { display: flex; align-items: stretch; gap: 3px; height: 148px; margin: 0; padding: 0; list-style: none; }
html[data-concept="a"] .sca-day { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) 18px; gap: 4px; }
html[data-concept="a"] .sca-day__col { position: relative; display: block; border-bottom: 1px solid var(--line); }
html[data-concept="a"] .sca-day__col i { position: absolute; left: 12%; right: 12%; bottom: 0; height: var(--h); max-width: 40px; margin-inline: auto; border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--accent-text) 38%, var(--surface)); transform-origin: bottom; }
html[data-concept="a"] .sca-day.is-best .sca-day__col i { background: color-mix(in srgb, var(--accent-text) 66%, var(--surface)); }
html[data-concept="a"] .sca-day.is-today .sca-day__col i { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] .sca-day:hover .sca-day__col i { background: var(--accent-hover); } }
html[data-concept="a"] .sca-day__l { font: 500 11px/18px var(--font-mono); color: var(--ca-axis); text-align: center; white-space: nowrap; overflow: visible; }
html[data-concept="a"] .sca-day__l.is-quiet { visibility: hidden; }
html[data-concept="a"] .sca-day.is-today .sca-day__l { color: var(--accent-text); font-weight: 600; }
/* branch split */
html[data-concept="a"] .sca-split { display: grid; gap: 6px; }
html[data-concept="a"] .sca-split__bar { margin-top: 0; height: 8px; }
html[data-concept="a"] .sca-split__k { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
html[data-concept="a"] .sca-split__k > span { display: inline-flex; align-items: center; gap: 6px; }
html[data-concept="a"] .sca-split__k i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
html[data-concept="a"] .sca-split__k b { font-weight: 500; color: var(--ink); }
html[data-concept="a"] .sca-split__pct { font: 500 12px/1 var(--font-mono); color: var(--ink-3); }
/* gate rhythm */
html[data-concept="a"] .sca-hours__peak { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
html[data-concept="a"] .sca-hours__peak b { font-weight: 500; color: var(--ink); }
html[data-concept="a"] .sca-hours__bars { display: flex; gap: 3px; height: 128px; margin: 0; padding: 0; list-style: none; }
html[data-concept="a"] .sca-hours__bars li { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) 16px; gap: 4px; }
html[data-concept="a"] .sca-hours__col { position: relative; display: block; border-radius: 3px; background: var(--surface-3); }
html[data-concept="a"] .sca-hours__col i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 3px; background: color-mix(in srgb, var(--ca-b2) 55%, var(--surface)); }
html[data-concept="a"] .sca-hours__bars li.is-peak .sca-hours__col i { background: var(--ca-b2); }
html[data-concept="a"] .sca-hours__l { font-size: 11px; line-height: 16px; color: var(--ca-axis); text-align: center; }
html[data-concept="a"] .ca-enter .sca-day__col i, html[data-concept="a"] .ca-enter .sca-hours__col i { animation: sca-up 560ms var(--ease-out) both; animation-delay: calc(180ms + var(--d, 0ms)); }
html[data-concept="a"] .ca-enter .sca-split__bar i { animation: ca-grow 600ms var(--ease-out) both; animation-delay: 200ms; transform-origin: left; }
@keyframes sca-up { from { transform: scaleY(0); } to { transform: none; } }

/* status control: the A segmented look sits on the band */
html[data-concept="a"] .sale-status .seg__sub { font-family: var(--font-mono); font-weight: 500; }

/* rows: pieces bar relative to the day's biggest load, status as a tag, who */
html[data-concept="a"] .sca-pb { display: inline-block; position: relative; width: 44px; height: 4px; margin-right: 8px; vertical-align: middle; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
html[data-concept="a"] .sca-pb i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: var(--accent); }
html[data-concept="a"] .sca-pb--pending i { background: var(--warn-bar); }
html[data-concept="a"] .sca-pb--rejected i, html[data-concept="a"] .sca-pb--cancelled i { background: var(--line-strong); }
html[data-concept="a"] .sca-pcs { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; }
html[data-concept="a"] .sca-pcs .sca-pb { width: 64px; }
html[data-concept="a"] .sca-pcs .num { min-width: 5ch; text-align: right; }
html[data-concept="a"] .sca-by { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
html[data-concept="a"] .sale-table .table, html[data-concept="a"] .sale-queue { border-radius: var(--r-card); }
html[data-concept="a"] .sale-table .table thead th { font: 500 11px/16px var(--font-mono); letter-spacing: .06em; color: var(--ink-3); }
html[data-concept="a"] .sale-table .sale-no, html[data-concept="a"] .sale-rows .sale-no, html[data-concept="a"] .sale-q .sale-no { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.01em; }
html[data-concept="a"] .sale-table .num { font-family: var(--font-mono); letter-spacing: -.02em; }
html[data-concept="a"] .sale-table .stxt, html[data-concept="a"] .sale-rows .lrow__end .stxt, html[data-concept="a"] .sale-detail .stxt {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 5px; border-radius: 6px; font: 500 12px/1 var(--font); white-space: nowrap;
}
html[data-concept="a"] .sale-table .stxt .ic, html[data-concept="a"] .sale-rows .lrow__end .stxt .ic { width: 13px; height: 13px; }
html[data-concept="a"] .sale-table .stxt--ok, html[data-concept="a"] .sale-rows .stxt--ok { background: var(--ok-soft); }
html[data-concept="a"] .sale-table .stxt--warn, html[data-concept="a"] .sale-rows .stxt--warn { background: var(--warn-soft); }
html[data-concept="a"] .sale-table .stxt--danger, html[data-concept="a"] .sale-rows .stxt--danger { background: var(--danger-soft); }
html[data-concept="a"] .sale-table .stxt--neutral, html[data-concept="a"] .sale-rows .stxt--neutral { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) {
  html[data-concept="a"] .sale-table tbody tr { transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
  html[data-concept="a"] .sale-table tbody tr:hover { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--accent); }
}
html[data-concept="a"] .sale-rows .glist__label { font-family: var(--font-mono); letter-spacing: .06em; }
html[data-concept="a"] .sale-rows .lrow__meta .sca-pb { width: 32px; margin-right: 6px; }

/* the owner's queue: graphite-quiet rows, a satisfying seal on approve */
html[data-concept="a"] .sale-queue { box-shadow: var(--shadow-1); }
html[data-concept="a"] .sale-q { position: relative; transition: background-color 200ms var(--ease-out); }
html[data-concept="a"] .sale-q.is-approved { background: var(--ok-soft); }
html[data-concept="a"] .sale-q.is-approved > *:not(.sca-seal) { opacity: .35; transition: opacity 160ms var(--ease-out); }
html[data-concept="a"] .sca-seal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1 var(--font); color: var(--ok); pointer-events: none; animation: sca-seal 420ms var(--ease-out) both; }
html[data-concept="a"] .sca-seal .ic { width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: var(--ok); color: var(--surface); }
@keyframes sca-seal { 0% { opacity: 0; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }

/* ---- sale detail: the receipt */
html[data-concept="a"] .sca-rcpt { position: relative; padding: 0; overflow: hidden; display: grid; gap: 0; }
html[data-concept="a"] .sca-rcpt__top { position: relative; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); padding: var(--s-5, 20px) var(--s-4) var(--s-4); background: radial-gradient(120% 160% at 0% 0%, var(--ca-glow), transparent 60%); }
@media (min-width: 560px) { html[data-concept="a"] .sca-rcpt__top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-inline: var(--s-5, 20px); } }
html[data-concept="a"] .sca-rcpt__eye { margin: 0 0 8px; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html[data-concept="a"] .sca-rcpt__plate { margin: 0; }
html[data-concept="a"] .sca-rcpt__plate .plate { font-size: 24px; line-height: 32px; padding: 2px 12px; border-width: 2px; }
html[data-concept="a"] .sca-rcpt__no { display: flex; align-items: center; gap: var(--s-2); margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
html[data-concept="a"] .sca-rcpt__amt { display: grid; gap: 2px; justify-items: start; }
@media (min-width: 560px) { html[data-concept="a"] .sca-rcpt__amt { justify-items: end; text-align: right; } }
html[data-concept="a"] .sca-rcpt__k { font-size: 13px; line-height: 18px; color: var(--ink-3); }
html[data-concept="a"] .sca-rcpt__v { font-size: 34px; line-height: 40px; font-weight: 500; letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
html[data-concept="a"] .sca-rcpt__cut { height: 0; margin: 0 var(--s-4); border-top: 2px dashed var(--line); position: relative; }
html[data-concept="a"] .sca-rcpt__cut::before, html[data-concept="a"] .sca-rcpt__cut::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
html[data-concept="a"] .sca-rcpt__cut::before { left: calc(-1 * var(--s-4) - 9px); } html[data-concept="a"] .sca-rcpt__cut::after { right: calc(-1 * var(--s-4) - 9px); }
html[data-concept="a"] .sca-rcpt__sec { display: grid; gap: var(--s-2); padding: var(--s-4); }
@media (min-width: 560px) { html[data-concept="a"] .sca-rcpt__sec { padding-inline: var(--s-5, 20px); } }
html[data-concept="a"] .sca-rcpt__sec + .sca-rcpt__sec { border-top: 1px solid var(--line); }
html[data-concept="a"] .sca-rcpt__sec .card__title { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html[data-concept="a"] .sca-rcpt .sale-lines td.num, html[data-concept="a"] .sca-rcpt .sale-lines td.ta-right { font-family: var(--font-mono); letter-spacing: -.02em; }
html[data-concept="a"] .sca-rcpt .sale-lines tfoot > tr > * { border-top: 2px solid var(--ink); font-size: 15px; }
html[data-concept="a"] .sca-stamp { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 2px solid var(--ok); border-radius: 6px; color: var(--ok); font: 600 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-6deg); opacity: .9; }
@media (min-width: 560px) { html[data-concept="a"] .sca-stamp { top: 16px; right: 20px; } }
html[data-concept="a"] .sca-rcpt--confirmed .sca-rcpt__amt { padding-top: 30px; }
@media (max-width: 559px) { html[data-concept="a"] .sca-rcpt--confirmed .sca-rcpt__amt { padding-top: 0; } }
html[data-concept="a"] .sca-stamp.is-new { animation: sca-stamp 520ms cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes sca-stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(1.9); } 60% { opacity: 1; transform: rotate(-5deg) scale(.94); } 100% { opacity: .9; transform: rotate(-6deg) scale(1); } }
/* the timeline: recorded → decided */
html[data-concept="a"] .sca-tl { display: grid; gap: 0; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); list-style: none; }
html[data-concept="a"] .sca-tl__s { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-3); }
html[data-concept="a"] .sca-tl__s:last-child { padding-bottom: 0; }
html[data-concept="a"] .sca-tl__s:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
html[data-concept="a"] .sca-tl__dot { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
html[data-concept="a"] .sca-tl__s--ok .sca-tl__dot { background: var(--ok); color: var(--surface); }
html[data-concept="a"] .sca-tl__s--bad .sca-tl__dot { background: var(--danger); color: var(--surface); }
html[data-concept="a"] .sca-tl__s--now .sca-tl__dot { background: var(--warn-soft); color: var(--warn); box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn-bar) 45%, transparent); animation: sca-wait 2s ease-out infinite; }
@keyframes sca-wait { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn-bar) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
html[data-concept="a"].no-motion .sca-tl__s--now .sca-tl__dot, html[data-concept="a"].no-motion .sca-stamp.is-new, html[data-concept="a"].no-motion .sca-seal { animation: none; }
html[data-concept="a"] .sca-tl__b { display: grid; gap: 1px; min-width: 0; padding-top: 3px; }
html[data-concept="a"] .sca-tl__t { font: 600 14px/20px var(--font); color: var(--ink); }
html[data-concept="a"] .sca-tl__who { font-weight: 400; color: var(--ink-2); }
html[data-concept="a"] .sca-tl__at { font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .sca-tl__ago { font-family: var(--font); }
html[data-concept="a"] .sca-tl__sub { font-size: 13px; line-height: 18px; color: var(--ink-2); overflow-wrap: anywhere; }
@media (min-width: 720px) {
  html[data-concept="a"] .sca-tl { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-inline: var(--s-5, 20px); }
  html[data-concept="a"] .sca-tl__s { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 0 var(--s-3) 0 0; }
  html[data-concept="a"] .sca-tl__s:not(:last-child)::before { left: 36px; right: 8px; top: 13px; bottom: auto; width: auto; height: 2px; }
  html[data-concept="a"] .sca-tl__s--done:not(:last-child)::before, html[data-concept="a"] .sca-tl__s--ok:not(:last-child)::before { background: color-mix(in srgb, var(--ok) 45%, var(--line)); }
}
/* side cards in the A look */
html[data-concept="a"] .sale-detail .sale-sum__total strong { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.03em; }
html[data-concept="a"] .sale-detail .sale-actions .btn--primary { min-height: 52px; font-size: 16px; }

/* ---- record sale: premium and fast. The plate reads as a plate; the summary is a graphite receipt (desktop) */
html[data-concept="a"] .sale-entry .sale-grp__label { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; }
html[data-concept="a"] .sale-entry .sale-grp__sub { font: 400 13px/18px var(--font); color: var(--ink-3); }
html[data-concept="a"] .sale-plate .input { font-family: var(--font-mono); font-weight: 600; letter-spacing: .06em; border: 2px solid var(--ink); border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line); }
html[data-concept="a"] .sale-plate .input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--accent-soft), 0 0 0 4px var(--ca-glow); outline: none; }
html[data-concept="a"] .sale-plate .input::placeholder { color: var(--line-strong); }   /* R11.2: 3.2:1 (was --stone-3, 1.65:1) */
html[data-concept="a"] .sale-ctx__no .mono { font-family: var(--font-mono); }
html[data-concept="a"] .sale-line { border-radius: 12px; box-shadow: var(--shadow-1); }
html[data-concept="a"] .sale-line.is-on { background: radial-gradient(140% 120% at 0% 0%, var(--ca-glow), transparent 60%), var(--surface); }
html[data-concept="a"] .sale-line .stepper__input { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.02em; }
html[data-concept="a"] .sale-line .stepper__chip { font-family: var(--font-mono); font-weight: 500; }
html[data-concept="a"] .sale-line .stepper__sub, html[data-concept="a"] .sale-line__sum { font-family: var(--font-mono); font-size: 13px; }
html[data-concept="a"] .sale-line__sum { color: var(--accent-text); }
html[data-concept="a"] .sale-bar .abar__total .num { font-family: var(--font-mono); letter-spacing: -.03em; }
@media (min-width: 720px) {
  html[data-concept="a"] .sale-side { background: var(--ca-chrome); color: var(--ca-chrome-ink); border-color: var(--ca-chrome-line); box-shadow: var(--shadow-2); }
  html[data-concept="a"] .sale-side__label { color: var(--ca-chrome-ink-2); font-family: var(--font-mono); letter-spacing: .08em; }
  html[data-concept="a"] .sale-side .sale-sumline { border-bottom: 1px dashed var(--ca-chrome-line); }
  html[data-concept="a"] .sale-side .sale-sumline > span:first-child { color: var(--ca-chrome-ink); }
  html[data-concept="a"] .sale-side .sale-sumline__sub, html[data-concept="a"] .sale-side .sale-sumline--none { color: var(--ca-chrome-ink-2); font-family: var(--font-mono); font-size: 13px; }
  html[data-concept="a"] .sale-side .sale-sumline .num { font-family: var(--font-mono); color: var(--ca-chrome-ink); }
  html[data-concept="a"] .sale-side .abar__label { color: var(--ca-chrome-ink-2); }
  html[data-concept="a"] .sale-side .abar__total { color: var(--ca-chrome-ink); }
  html[data-concept="a"] .sale-side .abar__total .num { font-size: 30px; line-height: 36px; font-weight: 500; }
  html[data-concept="a"] .sale-side .abar__sub, html[data-concept="a"] .sale-side .abar__reason { color: var(--ca-chrome-ink-2); }
  html[data-concept="a"] .sale-side .abar__btn { box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
  html[data-concept="a"] .sale-side .abar__btn:focus-visible { outline-color: var(--ca-chrome-accent); }
}
@media (max-width: 719px) {
  html[data-concept="a"] .sale-bar { background: var(--ca-chrome); border-top: 1px solid var(--ca-chrome-line); }
  html[data-concept="a"] .sale-bar .abar__label, html[data-concept="a"] .sale-bar .abar__sub, html[data-concept="a"] .sale-bar .abar__reason { color: var(--ca-chrome-ink-2); }
  html[data-concept="a"] .sale-bar .abar__total { color: var(--ca-chrome-ink); font-size: 17px; letter-spacing: -.02em; }
  html[data-concept="a"] .sale-bar .abar__sub { font-size: 13px; }
  html[data-concept="a"] .sale-bar .abar__btn:focus-visible { outline-color: var(--ca-chrome-accent); }
}
/* phone/tablet: the next step first, then the receipt, then the payment card (it would repeat the total above the receipt) */
@media (max-width: 1023px) {
  html[data-concept="a"] .sale-detail { display: flex; flex-direction: column; gap: 16px; }
  html[data-concept="a"] .sale-detail__main, html[data-concept="a"] .sale-detail__side { display: contents; }
  html[data-concept="a"] .sale-detail__main > *, html[data-concept="a"] .sale-detail__side > * { margin: 0; order: 3; }
  html[data-concept="a"] .sale-detail .sale-actions { order: 1; }
  html[data-concept="a"] .sale-detail .sca-rcpt { order: 2; }
  html[data-concept="a"] .sale-detail .sale-sum { order: 4; }
  html[data-concept="a"] .sale-detail__act { order: 5; }
}
/* R11.2: Design A sizes every .seg__btn at 34 px (44 on touch) under html[data-concept="a"], which out-ranks this
   module's own 48 px floor above; keep the floor (touch targets, approved R8/R9 sizes). */
html[data-concept="a"] .sale-status .seg__btn { min-height: var(--tap); }