/* Commission screens (mockup/js/claims.js) — `cl-` prefix. R9 daily entry (R9-PLAN §2.2 + addendum, §2.13 A–C) on the
 * R6/R8 system: tokens only (type --t-*, spacing --s-*, radii --r-*, motion --d-* / --ease-*); no colour literals
 * (qa/r5-contrast.cjs lints this). Cards are flat (1 px --line). Phone first (360 / 412 Android): every control ≥ 48 px,
 * inputs 16 px, no sideways page scroll. Motion: press feedback (scale .97 on :active, ease-out); typing pieces never
 * animates (100×-a-day). R10 §8.4/§8.5 (research/erp-r10/DESIGN-SPEC.md): only commits move — a row's green edge on
 * Next, the bar's counter and progress line, the day's partial ring, the strip's sliding outline; on Check & pay the
 * case seal, leave + FLIP, the contra strike and the Pay all success sheet. Transform and opacity only (the ring and the
 * strike are SVG stroke offsets / scaleX). Hover only under (hover:hover) and (pointer:fine). Reduced motion keys on
 * html.no-motion (the system setting OR Settings → Reduce motion): everything lands at its end state. */

.cl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); min-width: 0; }
@media (min-width: 720px) { .cl { gap: var(--s-6); } }
.cl .page-head { margin-bottom: 0; }
.cl p { margin: 0; }
.cl-h { margin: 0; font: var(--t-h3); color: var(--ink); }
.cl-h__sub { font: var(--t-meta); color: var(--ink-3); white-space: nowrap; }
.cl-sect { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); margin: 0 0 var(--s-3); font: var(--t-h3); color: var(--ink); }
.cl-sect--row { align-items: center; justify-content: space-between; }
.cl-sect__n { font: var(--t-meta); color: var(--ink-3); }
.cl-meta { font: var(--t-meta); color: var(--ink-2); overflow-wrap: anywhere; }
.cl-note { margin-top: var(--s-2); }
.cl-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); min-width: var(--tap); padding: 0; border: 0; background: none; color: var(--accent-text); font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 2px; touch-action: manipulation; }
.cl-av { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font: var(--t-label); letter-spacing: .02em; }
.cl-av--empty, .cl-av--com { background: var(--surface-2); color: var(--ink-2); }
.cl .tone-ok { color: var(--ok); } .cl .tone-warn { color: var(--warn); } .cl .tone-info { color: var(--ink-2); }

/* head: branch switch + the two links */
.cl .page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cl-branch .seg { min-width: 0; }
.cl-branch .seg__btn { min-height: var(--tap); }
.cl-headlinks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cl-headlinks .btn { min-height: var(--tap); align-self: center; align-items: center; }
.cl-wkpick { display: flex; align-items: center; gap: var(--s-1); }
@media (max-width: 719px) {
  .cl .page-tools { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .cl-branch .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .cl-headlinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-headlinks .btn { justify-content: center; }
  /* COM-R9-05 / UX-02: the day's head is ONE row on a phone (branch switch + People as an icon), so the list tabs and
     the first truck start on the first screen; the tank banner waits in the bell here (the bell keeps it) */
  .cl-day .page-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .cl-day .cl-headlinks { display: flex; }
  .cl-topeople { width: var(--tap); padding: 0; }
  .cl-day { gap: var(--s-3); }
  .cl-day .cl-headlinks { gap: var(--s-1); }
  .cl-topeople__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:has(#view .cl-day) .qbanner { display: none; }
  .cl-strip__day { min-height: 48px; }
  .cl-day .cl-strip { gap: var(--s-1); }
  .cl-day .cl-list { padding-top: var(--s-3); }
  .cl-day .cl-person { min-height: 52px; }
  /* UX-01: while a pieces field has the keyboard, the tab bar goes (as in task mode) and the Save bar drops to the edge.
     claims.js sets html.cl-typing, and keeps it a moment after the field loses focus so a tap on Save is not moved */
  html.cl-typing:has(#view .cl-day) { --tabbar-h: 0px; --tabbar-rise: 0px; }
  html.cl-typing:has(#view .cl-day) .tabbar { display: none; }
}

/* week strip (Supershift): ‹ 19–25 Oct ›, then Mon–Sun; ✓ saved · • sales not saved */
.cl-strip { display: grid; gap: var(--s-2); }
.cl-strip__wk { display: flex; align-items: center; gap: var(--s-1); }
.cl-strip__wk .cl-topay { margin-inline-start: auto; min-height: var(--tap); display: inline-flex; align-items: center; }
.cl-strip__today { padding-inline: var(--s-2); }
.cl-strip__label { font: var(--t-meta); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cl-strip__nav { width: var(--tap); height: var(--tap); }
.cl-strip__track { position: relative; }
/* R10 §8.4 the selected day's outline is ONE element that slides between chips (--d-indicator, Q.motion.slide); the
   chip keeps its 2 px border width (transparent) so nothing moves when it takes over */
.cl-strip__sel { position: absolute; left: 0; top: 0; z-index: 1; border: 2px solid var(--accent); border-radius: var(--r-input); pointer-events: none; opacity: 0; }
.cl-strip__track.has-sel > .cl-strip__sel { opacity: 1; }
.cl-strip__track.has-sel .cl-strip__day[aria-current="date"] { border-color: transparent; }
.cl-strip__days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); }
/* phones: the seven days take the full width (gutters 4 px) so each stays ≥ 48 px wide at 360 */
@media (max-width: 479px) { .cl-strip__days { gap: 2px; margin-inline: calc(4px - var(--gutter-l)) calc(4px - var(--gutter-r)); } }
.cl-strip__day {
  position: relative; width: 100%; min-height: 64px; display: grid; justify-items: center; align-content: center; gap: 0; padding: var(--s-1) 0;
  border: 1px solid var(--line); border-radius: var(--r-input); background: var(--surface); color: var(--ink); font: inherit; touch-action: manipulation;
  transition: transform var(--d-press) var(--ease-out);
}
.cl-strip__day:active { transform: scale(.97); }
.cl-strip__day[aria-current="date"] { background: var(--accent-soft); border: 2px solid var(--accent); color: var(--accent-text); }
.cl-strip__day:disabled { color: var(--ink-3); background: var(--surface-3); }
.cl-strip__wd { font: var(--t-label); text-transform: uppercase; letter-spacing: .04em; }
.cl-strip__n { position: relative; display: inline-grid; place-items: center; min-width: 28px; font: var(--t-h3); }
/* the partial ring: the share of the day's trucks on a list (pathLength 1; claims.js writes the offset on commit) */
.cl-ring { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; transform: rotate(-90deg); overflow: visible; pointer-events: none; }
.cl-ring circle { fill: none; stroke-width: 2; }
.cl-ring__bg { stroke: var(--line); }
.cl-ring__fg { stroke: var(--accent-text); stroke-linecap: round; stroke-dasharray: 1 1; transition: stroke-dashoffset var(--d-draw) var(--ease-out); }
.cl-strip__mk { display: inline-flex; gap: 2px; align-items: center; height: 14px; color: var(--ok); }

.cl-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--warn-bar); }
.cl-dot--edit { background: var(--accent); }

@media (hover: hover) and (pointer: fine) { .cl-strip__day:not(:disabled):not([aria-current="date"]):hover { background: var(--surface-3); } }

/* first-open line (Sortly): one sentence, dismissible */
.cl-intro { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-radius: var(--r-input); background: var(--info-soft); color: var(--ink); font: var(--t-meta); }
.cl-intro > .ic { flex: none; color: var(--info); }
.cl-intro p { flex: 1; min-width: 0; }

/* R9.1 the three lists of a day (Community · Person 1 · Person 2) as tabs over one list card. Each tab names its list
   and, under it, its trucks · KES; the strip fills the width on a phone (three equal tabs, each ≥ 48 px). */
.cl-lists { display: grid; gap: var(--s-3); min-width: 0; }
.cl-tabs { margin-bottom: 0; }
.cl-tab { flex: 1 1 0; min-width: 0; min-height: 56px; display: grid; align-content: center; justify-items: center; gap: 2px; padding-block: var(--s-1); text-align: center; touch-action: manipulation; }
.cl-tab__name { font-weight: 600; white-space: nowrap; }
.cl-tab__sub { font: var(--t-meta); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cl-tab[aria-selected="true"] .cl-tab__sub { color: var(--ink-2); }
@media (min-width: 720px) { .cl-tab { flex: 0 1 auto; min-width: 160px; } }
/* phones: three equal tabs that never scroll ("9 · KES 14,000" fits a third of 360) */
@media (max-width: 719px) { .cl-tabs { overflow: visible; } .cl-tab { padding-inline: var(--s-1); } .cl-tab__sub { font: var(--t-label); font-weight: 500; } }
.cl-list { display: grid; gap: var(--s-3); padding: var(--s-4) 0 0; overflow: hidden; }
.cl-list[hidden] { display: none; }
.cl-list__head { display: grid; gap: var(--s-2); padding-inline: var(--s-4); }
.cl-list__err:empty { display: none; }
.cl-list__none { padding-inline: var(--s-4); }
.cl-dayline { font: var(--t-meta); color: var(--ink-2); }
.cl-person {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-input); background: var(--surface); color: var(--ink); font: inherit; text-align: left; touch-action: manipulation;
  transition: transform var(--d-press) var(--ease-out);
}
button.cl-person:active { transform: scale(.97); }
.cl-person--ro { border-style: dashed; }
.cl-person__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cl-person__go { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--accent-text); font: var(--t-meta); font-weight: 600; }
/* addendum 2: recent people as one-tap chips under an empty person list (never pre-selected) */
.cl-recent { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cl-recent__chip { min-height: var(--tap); max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--ink); touch-action: manipulation; transition: transform var(--d-press) var(--ease-out); }
.cl-recent__chip:active { transform: scale(.97); }

/* the truck rows: the whole row is the label of its pieces field (tap anywhere → the field) */
.cl-trucks { list-style: none; margin: 0; padding: 0; }
.cl-trucks > li + li { border-top: 1px solid var(--line); }
.cl-truck {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 96px; grid-template-areas: "time id pcs" "time flags pcs"; align-items: center; column-gap: var(--s-2);
  min-height: 64px; padding: var(--s-2) var(--s-4); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.cl-truck.is-on { background: var(--accent-soft); }
/* R10 §8.4 the commit edge: a 3 px --ok bar at the row's start grows from the bottom (--d-tick) when the cursor leaves a
   filled row (Next). While the row is being typed in it stays down: nothing moves on a keystroke. */
.cl-truck { position: relative; }
.cl-truck::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--ok); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--d-tick) var(--ease-out); pointer-events: none; }
.cl-truck.is-on:not(:focus-within)::before { transform: scaleY(1); }
.cl-truck__time { grid-area: time; font: var(--t-meta); color: var(--ink-2); }
.cl-truck__id { grid-area: id; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); min-width: 0; }
.cl-truck__sale { font: var(--t-meta); color: var(--ink-3); white-space: nowrap; }
.cl-truck__flags { grid-area: flags; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.cl-truck__flags:empty { display: none; }
.cl-flag { display: inline-flex; align-items: center; gap: var(--s-1); font: var(--t-meta); font-weight: 600; }
.cl-pcs { grid-area: pcs; width: 100%; min-height: var(--tap); padding-inline: var(--s-3); text-align: right; font-size: 16px; }
.cl-pcs[aria-invalid="true"] { border-color: var(--danger); }
.cl-truck--extra { grid-template-columns: 48px minmax(0, 1fr) 48px 96px; grid-template-areas: "time id rm pcs" "time flags rm pcs"; }
.cl-truck__rm { grid-area: rm; }
.cl-truck--extra .cl-truck__time { color: var(--warn); }
@media (hover: hover) and (pointer: fine) { .cl-truck:hover { background: var(--surface-3); } .cl-truck.is-on:hover { background: var(--accent-soft); } }

/* "Decided this week" on Check & pay: a native disclosure (works without script) */
.cl-done { border-top: 1px solid var(--line); }
.cl-outside__sum { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); cursor: pointer; list-style: none; font: var(--t-meta); font-weight: 600; color: var(--ink-2); touch-action: manipulation; }
.cl-outside__sum::-webkit-details-marker { display: none; }
.cl-outside__sum > .ic { transition: transform var(--d-fast) var(--ease-out); }
details[open] > .cl-outside__sum > .ic { transform: rotate(180deg); }
.cl-list__foot { display: grid; gap: var(--s-1); padding: var(--s-2) var(--s-4) var(--s-4); border-top: 1px solid var(--line); }
.cl-list__sum { font: var(--t-meta); color: var(--ink-2); }

/* R10 §8.4 the day bar: a thin progress line along its top edge (scaleX, steps on commit; --ok when every truck is on a
   list) and the counter's small seal ("All 13 trucks on a list") */
#cl-abar .cl-bar__prog { position: absolute; inset-inline: 0; top: -1px; height: 3px; border-radius: 0; background: var(--surface-2); pointer-events: none; }
#cl-abar .cl-bar__prog > span { border-radius: 0; }
@media (min-width: 720px) { #cl-abar .cl-bar__prog { inset-inline: var(--r-card); } }
#cl-abar .abar__label { display: flex; align-items: center; gap: var(--s-1); }
.cl-bar__t { min-width: 0; }
.cl-bar__seal { display: inline-flex; flex: none; color: var(--ok); }
.cl-bar__seal[hidden] { display: none; }

/* sheets: person picker, person form, reasons, pay */
.cl-pick { display: grid; gap: var(--s-3); }
.cl-pick .glist__label { margin: var(--s-2) 0 var(--s-1); }
.cl-pick__row { min-height: 64px; }
.cl-pick__ok { color: var(--accent-text); }
.cl-pick__new, .cl-reasons .btn { min-height: var(--tap); }
.cl-pform { display: grid; gap: var(--s-3); }
.cl-brs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; border: 0; }
.cl-brs .check, .cl-pform > .check { min-height: var(--tap); }
.cl-reasons { display: grid; gap: var(--s-2); }
.cl-paysheet { display: grid; gap: var(--s-4); }
.cl-paysheet .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.cl-paysheet .seg__btn { min-height: var(--tap); }
.cl-refs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cl-topay { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.cl-topay__l { font: var(--t-meta); color: var(--ink-2); }
.cl-paybig { font: var(--t-hero); color: var(--ink); }
/* R10 §8.5 the Pay all success sheet (the method sheet, turned): seal, "Week paid", the paid figure, three lines */
.cl-paid { display: grid; justify-items: center; gap: var(--s-2); padding-block: var(--s-3) var(--s-2); text-align: center; }
.cl-paid__seal { display: inline-grid; place-items: center; color: var(--ok); margin-bottom: var(--s-2); }
.cl-paid__t { margin: 0; font: 700 24px/30px var(--font-display); font-stretch: var(--fs-title, 106%); color: var(--ink); }
.cl-paid__fig { margin: 0; font: var(--t-display); font-stretch: var(--fs-display, 118%); color: var(--ink); white-space: nowrap; }
.cl-paid__lines { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-1); font: var(--t-meta); color: var(--ink-2); }
@media (max-width: 379px) { .cl-paid__fig { font-size: 36px; line-height: 44px; } }

/* Check & pay */
.cl-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.cl-case, .cl-gone { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-inline-start: 4px solid var(--warn-bar); border-radius: var(--r-card); background: var(--surface); }
.cl-case__l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.cl-case__what { font: var(--t-meta); color: var(--ink-2); }
.cl-case__txt { font: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
.cl-case__btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cl-case__btns .btn { min-height: var(--tap); }
/* R10 §8.5 the decided card's copy on its way out: the chosen option wears the small seal */
.cl-gone .btn.is-chosen { border-color: var(--ok); color: var(--ink); }
.cl-gone .btn.is-chosen .seal { color: var(--ok); }
.cl-dprog { display: grid; gap: var(--s-1); margin: 0 0 var(--s-3); }
.cl-dprog .progress { height: 6px; }
/* R9.2: the quiet Reject buttons of an over case (one per list) share a row; the Cut buttons stay full width */
.cl-case__rej { display: contents; }
@media (max-width: 719px) { .cl-gone .cl-case__btns, .cl-case__btns { display: grid; grid-template-columns: minmax(0, 1fr); } .cl-case__btns .btn { justify-content: center; }
  .cl-case__rej { display: flex; flex-wrap: wrap; gap: var(--s-2); } .cl-case__rej .btn { flex: 1 1 auto; } }   /* never below its label: wraps instead */
.cl-blockers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cl-blockers li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font: var(--t-meta); }
.cl-blockers li > span { flex: 1; min-width: 12em; color: var(--ink-2); }
.cl-contra { display: grid; gap: var(--s-2); }
/* R9.1 five figures (Sold · Community · Person 1 · Person 2 · Left over): on a phone Sold takes the first row and the
   four lists share the second, so the strip never runs off the screen */
@media (max-width: 719px) {
  .cl-contra .stats { flex-wrap: wrap; row-gap: var(--s-3); }
  .cl-contra .stats__cell { min-width: min-content; padding-inline: var(--s-2); }   /* R10: Archivo-era labels; "COMMUNITY" never runs into "PERSON 1" */
  .cl-contra .stats__cell--lead { flex-basis: 100%; padding-inline: 0; }
  .cl-contra .stats__cell--lead + .stats__cell { padding-inline-start: 0; border-inline-start: 0; }
}
.cl .stats { margin: 0; }
.cl-contra__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.cl-contra__lines li { display: flex; align-items: center; gap: var(--s-2); font: var(--t-meta); }
.cl-contra__lines li > span { color: var(--ink-2); }
.cl-people .lrow__value { font-weight: 600; }
/* R10 §8.5 a cut in the contra strip: the old pieces struck by a 2 px --danger line drawn left → right, the new beside it */
.cl-was { position: relative; display: inline-block; text-decoration: none; color: var(--ink-3); font-weight: 500; }
.cl-strike { position: absolute; left: -1px; right: -1px; top: 50%; height: 2px; margin-top: -1px; background: var(--danger); transform-origin: 0 50%; pointer-events: none; }
.cl-now { display: inline-block; }
.cl-contra .stats__cell.is-cut .stats__value { white-space: normal; }   /* on a phone the new figure wraps under the struck one */
/* the paid week under the success sheet: the ledger illustration, compact */
.cl-paidnote .empty { padding: var(--s-6) var(--s-5); }
.cl-paidnote .empty__art .illo { width: 72px; }
.cl-done__list { list-style: none; margin: 0; padding: 0 var(--s-4) var(--s-3); display: grid; gap: var(--s-2); }
.cl-done__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); font: var(--t-meta); }

/* People */
.cl-ppl__list .lrow__meta { overflow-wrap: anywhere; }
.cl-ppl__add { min-height: var(--tap); }
.cl-ppl > section { display: grid; gap: var(--s-3); }
.cl-ppl .cl-sect { margin: 0; }

/* R10 §5.4 reduced motion (html.no-motion = the system setting OR Settings → Reduce motion): every moment lands */
html.no-motion .cl-truck::before, html.no-motion .cl-ring__fg, html.no-motion .cl-strip__sel { transition: none; }

/* ======================================================================================================================
 * R11.1 concept A "Control Room" (research/erp-r11/BRIEF-R11.1.md). Every rule is scoped under html[data-concept="a"];
 * claims.js draws the cla-* markup only under A. Tokens only (A's palette lives in concept-a.css), no colour literals.
 * List colours: Community = signal blue, Person 1 = teal, Person 2 = slate, left over (savings) = green hatch, over = red.
 * ==================================================================================================================== */
html[data-concept="a"] .cla-seg--community { --seg: var(--accent); }
html[data-concept="a"] .cla-seg--boy1 { --seg: var(--ca-b2); }
html[data-concept="a"] .cla-seg--boy2 { --seg: var(--line-strong); }
html[data-concept="a"] .cla-seg--rest { --seg: var(--line-strong); }
html[data-concept="a"] .cla-seg, html[data-concept="a"] .cla-sw { background: var(--seg, var(--line-strong)); }
html[data-concept="a"] .cla-seg--left { background: repeating-linear-gradient(-45deg, var(--ok) 0 2px, color-mix(in srgb, var(--ok) 30%, var(--surface)) 2px 5px); }
html[data-concept="a"] .cla-seg--left.is-over { background: var(--danger); }
html[data-concept="a"] .cl-day, html[data-concept="a"] .cl-week { gap: var(--s-4); }

/* eyebrow + sub labels in mono */
html[data-concept="a"] .cla-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 12px/16px var(--font-mono); letter-spacing: .02em; color: var(--ink-3); }
html[data-concept="a"] .cla-eyebrow__k { color: var(--accent-text); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
html[data-concept="a"] .cla-sub { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------------ the pay-week band */
html[data-concept="a"] .cla-band {
  grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main ring day" "split split split"; align-items: center; gap: var(--s-4) var(--s-5);
  padding: var(--s-5); background: radial-gradient(120% 160% at 0% 0%, var(--ca-glow), transparent 50%), var(--surface);
}
html[data-concept="a"] .cla-band--wk { grid-template-areas: "main ring day"; }
html[data-concept="a"] .cla-band__main { grid-area: main; display: grid; gap: 4px; min-width: 0; }
html[data-concept="a"] .cla-band__k { margin-top: var(--s-2) !important; font: 500 13px/18px var(--font); color: var(--ink-2); }
html[data-concept="a"] .cla-band__fig { font: 500 38px/44px var(--font-mono); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
html[data-concept="a"] .cla-band__m { font: 400 13px/18px var(--font); color: var(--ink-3); overflow-wrap: anywhere; }
html[data-concept="a"] .cla-band__ring { grid-area: ring; position: relative; width: 112px; height: 112px; }
html[data-concept="a"] .cla-ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
html[data-concept="a"] .cla-ring circle { fill: none; stroke-width: 4; }
html[data-concept="a"] .cla-ring__bg { stroke: var(--surface-2); }
html[data-concept="a"] .cla-ring__fg { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 1 1; }
html[data-concept="a"] .cla-ring--band circle { stroke-width: 3.5; }
html[data-concept="a"] .cla-band__pct { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
html[data-concept="a"] .cla-band__pct b { font: 500 22px/26px var(--font-mono); letter-spacing: -.03em; color: var(--ink); }
html[data-concept="a"] .cla-band__pct span { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html[data-concept="a"] .cla-payday { grid-area: day; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 128px; min-height: 112px; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); background: var(--ca-chrome); color: var(--ca-chrome-ink); box-shadow: inset 0 0 0 1px var(--ca-chrome-line); text-align: center; }
html[data-concept="a"] .cla-payday__n { font: 500 34px/38px var(--font-mono); letter-spacing: -.04em; color: var(--ca-chrome-ink); }
html[data-concept="a"] .cla-payday__t { font: 500 12px/16px var(--font); color: var(--ca-chrome-ink-2); }
html[data-concept="a"] .cla-payday__d { margin-top: 4px; font: 500 12px/16px var(--font-mono); color: var(--ca-chrome-accent); }
html[data-concept="a"] .cla-payday--due { box-shadow: inset 0 0 0 1px var(--ca-chrome-accent), 0 8px 24px -8px var(--ca-glow); }
html[data-concept="a"] .cla-payday--due .cla-payday__n { color: var(--ca-chrome-accent); }
html[data-concept="a"] .cla-payday--ok .cla-payday__n { color: var(--ca-live); }
html[data-concept="a"] .cla-band__split { grid-area: split; display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* the split bar (band on the day screen, "Where the stone went" on Check & pay) */
html[data-concept="a"] .cla-split { display: grid; gap: var(--s-3); }
html[data-concept="a"] .cla-split__bar { display: flex; gap: 3px; height: 12px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
html[data-concept="a"] .cla-split__bar .cla-seg { display: block; min-width: 4px; border-radius: 2px; }
html[data-concept="a"] .cla-split__k { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
html[data-concept="a"] .cla-split__k li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "sw n p" ". v v"; align-items: center; column-gap: 8px; min-width: 0; }
html[data-concept="a"] .cla-sw { grid-area: sw; width: 10px; height: 10px; border-radius: 3px; }
html[data-concept="a"] .cla-split__n { grid-area: n; font: 500 12px/16px var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-concept="a"] .cla-split__p { grid-area: p; font: 500 11px/16px var(--font-mono); color: var(--ink-3); }
html[data-concept="a"] .cla-split__v { grid-area: v; font: 500 16px/22px var(--font-mono); letter-spacing: -.02em; color: var(--ink); }

/* ------------------------------------------------------------------ the day strip as a coverage heat strip */
html[data-concept="a"] .cl-strip__day.cla-heat { min-height: 84px; gap: 1px; padding-bottom: 10px; overflow: hidden; color: var(--ink); background: var(--surface); }
html[data-concept="a"] .cl-strip__day.cla-heat[data-heat="1"], html[data-concept="a"] .cla-heatkey i[data-heat="1"] { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
html[data-concept="a"] .cl-strip__day.cla-heat[data-heat="2"], html[data-concept="a"] .cla-heatkey i[data-heat="2"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
html[data-concept="a"] .cl-strip__day.cla-heat[data-heat="3"], html[data-concept="a"] .cla-heatkey i[data-heat="3"] { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
html[data-concept="a"] .cl-strip__day.cla-heat[data-heat="4"], html[data-concept="a"] .cla-heatkey i[data-heat="4"] { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
html[data-concept="a"] .cl-strip__day.cla-heat:disabled { background: var(--surface-3); color: var(--ink-3); }
html[data-concept="a"] .cl-strip__day.cla-heat[aria-current="date"] { color: var(--ink); }
html[data-concept="a"] .cl-strip__day.cla-heat[aria-current="date"] .cl-strip__wd { color: var(--accent-text); font-weight: 600; }
html[data-concept="a"] .cl-strip__day.cla-heat .cl-strip__n { font: 500 18px/24px var(--font-mono); letter-spacing: -.02em; }
html[data-concept="a"] .cl-strip__day.cla-heat .cl-strip__wd { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; color: var(--ink-2); }
html[data-concept="a"] .cla-cov { font: 500 11px/14px var(--font-mono); color: var(--ink-2); }
html[data-concept="a"] .cla-covbar { position: absolute; left: 8px; right: 8px; bottom: 5px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
html[data-concept="a"] .cla-covbar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
html[data-concept="a"] .cla-heat[data-heat="4"] .cla-covbar > i { background: var(--ok); }
html[data-concept="a"] .cla-heatkey { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; font: 500 11px/16px var(--font-mono); color: var(--ink-3); }
html[data-concept="a"] .cla-heatkey span:first-child { margin-right: 6px; }
html[data-concept="a"] .cla-heatkey span:last-child { margin-left: 4px; }
html[data-concept="a"] .cla-heatkey i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 479px) {
  html[data-concept="a"] .cl-strip__day.cla-heat { min-height: 76px; padding-bottom: 9px; }
  html[data-concept="a"] .cl-strip__day.cla-heat .cl-strip__n { font-size: 16px; line-height: 20px; }
  html[data-concept="a"] .cla-cov { font-size: 11px; letter-spacing: -.02em; }
  html[data-concept="a"] .cla-covbar { left: 5px; right: 5px; }
}

/* ------------------------------------------------------------------ tabs: per-list progress; the list card */
html[data-concept="a"] .cla-tabp { display: block; width: 72%; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
html[data-concept="a"] .cla-tabp > i { display: block; height: 100%; border-radius: inherit; background: var(--seg); }
html[data-concept="a"] .cl-tab__sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: -.01em; }
html[data-concept="a"] .cl-list { box-shadow: var(--shadow-1); }
html[data-concept="a"] .cl-list__who { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-3); }
html[data-concept="a"] .cl-list__sum, html[data-concept="a"] .cl-dayline { font-family: var(--font-mono); font-size: 13px; letter-spacing: -.01em; }

/* the truck row: time · plate · sale, flags, and the pieces-vs-sale meter under them */
html[data-concept="a"] .cl-truck { grid-template-areas: "time id pcs" "time flags pcs" "time meter pcs"; row-gap: 4px; }
html[data-concept="a"] .cl-truck--extra { grid-template-areas: "time id rm pcs" "time flags rm pcs"; }
html[data-concept="a"] .cl-truck__time { font: 500 13px/18px var(--font-mono); color: var(--ink-3); }
html[data-concept="a"] .cl-truck__sale { font-family: var(--font-mono); font-size: 12px; }
html[data-concept="a"] .cl-flag { font-size: 12px; line-height: 16px; }
html[data-concept="a"] .cl-pcs { font-family: var(--font-mono); font-weight: 500; }
html[data-concept="a"] .cl-truck.is-on { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] .cl-truck.is-on:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } }
html[data-concept="a"] .cla-meter { grid-area: meter; display: block; max-width: 360px; }
html[data-concept="a"] .cla-meter__bar, html[data-concept="a"] .cla-cmeter__bar { position: relative; display: flex; gap: 2px; height: 6px; border-radius: 3px; background: var(--surface-2); }
html[data-concept="a"] .cla-meter__bar .cla-seg, html[data-concept="a"] .cla-cmeter__bar .cla-seg { display: block; flex: none; height: 100%; border-radius: 2px; }
html[data-concept="a"] .cla-meter__bar .cla-seg:not(.is-me):not(.cla-seg--left) { opacity: .5; }
html[data-concept="a"] .cla-meter__sale { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }

/* ------------------------------------------------------------------ Check & pay: decisive case cards */
html[data-concept="a"] .cla-case { gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-inline-start: 3px solid var(--warn-bar); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-1); }
html[data-concept="a"] .cla-case--void, html[data-concept="a"] .cla-case--nosale { border-inline-start-color: var(--danger); }
html[data-concept="a"] .cla-case .cl-case__l1 { align-items: center; }
html[data-concept="a"] .cla-case .cl-case__l1 .ca-tag { margin-inline-start: auto; height: 24px; padding: 0 8px; font: 500 12px/1 var(--font-mono); }
html[data-concept="a"] .cla-case .cl-case__what { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-3); }
html[data-concept="a"] .cla-case .cl-case__txt { font: 500 15px/22px var(--font-mono); letter-spacing: -.01em; }
html[data-concept="a"] .cla-case .cl-case__btns { gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
html[data-concept="a"] .cla-case .cl-case__btns .btn--secondary { min-height: 48px; padding-inline: var(--s-4); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); font-weight: 600; }
html[data-concept="a"] .cla-case .cl-case__btns .btn--secondary:first-child { background: var(--ink); border-color: var(--ink); color: var(--surface); }
html[data-concept="a"] .cla-case .cl-case__rej .btn { color: var(--danger); min-height: 48px; }
@media (hover: hover) and (pointer: fine) {
  html[data-concept="a"] .cla-case { transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out); }
  html[data-concept="a"] .cla-case:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--ink) 18%, transparent), var(--shadow-1); }
  html[data-concept="a"] .cla-case .cl-case__btns .btn--secondary:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
  html[data-concept="a"] .cla-case .cl-case__btns .btn--secondary:first-child:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}
html[data-concept="a"] .cla-cmeter { display: grid; gap: 6px; }
html[data-concept="a"] .cla-cmeter__bar { height: 10px; border-radius: 4px; }
html[data-concept="a"] .cla-cmeter__over { position: absolute; top: 0; bottom: 0; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--danger) 70%, transparent) 0 2px, transparent 2px 5px); }
html[data-concept="a"] .cla-cmeter__bar .cla-meter__sale { top: -4px; bottom: -4px; }
html[data-concept="a"] .cla-cmeter__k { display: flex; justify-content: space-between; gap: var(--s-2); font: 500 12px/16px var(--font-mono); color: var(--ink-3); }
html[data-concept="a"] .cla-cmeter__o { color: var(--danger); }
html[data-concept="a"] .cl-sect { font: 600 15px/20px var(--font); letter-spacing: -.01em; }
html[data-concept="a"] .cl-sect__n { font-family: var(--font-mono); font-size: 12px; }
html[data-concept="a"] .cl-dprog .progress { height: 4px; }
html[data-concept="a"] .cl-dprog .cl-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
html[data-concept="a"] .cl-blockers li { padding: 10px var(--s-3); border-radius: var(--r-input); background: var(--warn-soft); }
html[data-concept="a"] .cl-blockers li > span { color: var(--ink); }
html[data-concept="a"] .cla-contra { gap: var(--s-4); }
html[data-concept="a"] .cla-contra .stats { padding-top: var(--s-3); border-top: 1px solid var(--line); }
html[data-concept="a"] .cla-contra .cl-contra__lines li { font-family: var(--font-mono); font-size: 12px; }
html[data-concept="a"] .cla-people .cl-people { box-shadow: var(--shadow-1); }

/* ------------------------------------------------------------------ pay weeks history */
html[data-concept="a"] .cla-hist { padding-bottom: var(--s-2); }
html[data-concept="a"] .cla-hist__list { list-style: none; margin: 0 calc(-1 * var(--s-2)); padding: 0; display: grid; gap: 2px; }
html[data-concept="a"] .cla-hist__row {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ring l r" "ring bar bar"; align-items: center; column-gap: var(--s-3); row-gap: 6px;
  padding: 10px var(--s-2); border: 0; border-radius: var(--r-input); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: transform var(--d-press) var(--ease-out);
}
html[data-concept="a"] .cla-hist__row:active { transform: scale(.98); }
html[data-concept="a"] .cla-hist__row.is-on { background: var(--accent-soft); }
html[data-concept="a"] .cla-hist__ring { grid-area: ring; width: 36px; height: 36px; }
html[data-concept="a"] .cla-hist__ring .cla-ring circle { stroke-width: 5; }
html[data-concept="a"] .cla-hist__l { grid-area: l; display: grid; min-width: 0; }
html[data-concept="a"] .cla-hist__wk { font: 600 14px/20px var(--font-mono); letter-spacing: -.01em; }
html[data-concept="a"] .cla-hist__m { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow-wrap: anywhere; }
html[data-concept="a"] .cla-hist__r { grid-area: r; display: grid; justify-items: end; gap: 2px; }
html[data-concept="a"] .cla-hist__v { font: 500 14px/20px var(--font-mono); letter-spacing: -.02em; white-space: nowrap; }
html[data-concept="a"] .cla-hist__bar { grid-area: bar; position: relative; height: 4px; border-radius: 2px; }
html[data-concept="a"] .cla-hist__bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
html[data-concept="a"] .cla-hist__bar > i.cla-hist__paid { background: var(--ok); }
html[data-concept="a"] .ca-tag--accent { background: var(--accent-soft); color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] .cla-hist__row:hover:not(.is-on) { background: var(--surface-3); } }

/* ------------------------------------------------------------------ the Pay all moment: dial, roll, payee rows */
html[data-concept="a"] .cla-paid { gap: var(--s-1); padding-block: var(--s-2) 0; }
html[data-concept="a"] .cla-paid__dial { position: relative; width: 132px; height: 132px; margin-bottom: var(--s-3); border-radius: 50%; background: radial-gradient(closest-side, var(--ca-glow), transparent); }
html[data-concept="a"] .cla-paid__svg { display: block; width: 100%; height: 100%; overflow: visible; }
html[data-concept="a"] .cla-paid__svg circle { fill: none; stroke-width: 6; }
html[data-concept="a"] .cla-paid__bg { stroke: var(--surface-2); }
html[data-concept="a"] .cla-paid__fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 1 1; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke 240ms var(--ease-out); }
html[data-concept="a"] .cla-paid__dial.is-full .cla-paid__fg { stroke: var(--ok); }
html[data-concept="a"] .cla-paid__chk { fill: none; stroke: var(--ok); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
html[data-concept="a"] .cla-paid__eb { justify-content: center; }
html[data-concept="a"] .cla-paid .cl-paid__t { font: 600 22px/28px var(--font); letter-spacing: -.02em; }
html[data-concept="a"] .cla-paid .cl-paid__fig { font: 500 40px/48px var(--font-mono); letter-spacing: -.045em; }
html[data-concept="a"] .cla-paid__meta { font: 500 12px/16px var(--font-mono); color: var(--ink-3); }
html[data-concept="a"] .cla-paid__rows { list-style: none; width: 100%; margin: var(--s-4) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; text-align: left; }
html[data-concept="a"] .cla-paid__rows li { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr) 7.5em; align-items: center; gap: var(--s-3); font-size: 13px; line-height: 18px; }
html[data-concept="a"] .cla-paid__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
html[data-concept="a"] .cla-paid__bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
html[data-concept="a"] .cla-paid__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--seg); transform-origin: 0 50%; }
html[data-concept="a"] .cla-paid__v { font: 500 13px/18px var(--font-mono); white-space: nowrap; text-align: right; }
html[data-concept="a"] .cla-paid__by { margin-top: var(--s-2) !important; font-size: 12px; color: var(--ink-3); }
@media (max-width: 379px) { html[data-concept="a"] .cla-paid .cl-paid__fig { font-size: 32px; line-height: 40px; } }

/* ------------------------------------------------------------------ phones */
@media (max-width: 719px) {
  html[data-concept="a"] .cla-band, html[data-concept="a"] .cla-band--wk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main main" "ring day" "split split"; gap: var(--s-3); padding: var(--s-4); }
  html[data-concept="a"] .cla-band--wk { grid-template-areas: "main main" "ring day"; }
  html[data-concept="a"] .cla-band__fig { font-size: 30px; line-height: 36px; }
  html[data-concept="a"] .cla-band__ring { width: 96px; height: 96px; justify-self: center; }
  html[data-concept="a"] .cla-payday { min-width: 0; min-height: 96px; }
  html[data-concept="a"] .cla-payday__n { font-size: 28px; line-height: 32px; }
  html[data-concept="a"] .cla-split__k { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-concept="a"] .cla-case { padding: var(--s-4); }
  html[data-concept="a"] .cla-meter { max-width: none; }
}

/* reduced motion: everything lands */
html[data-concept="a"].no-motion .cla-paid__fg, html[data-concept="a"].no-motion .cla-hist__row, html[data-concept="a"].no-motion .cla-case { transition: none; }

/* round 2: a 0 % ring draws nothing (no round-cap dot); the contra card's figures carry the list swatches; phones keep
   the day's entry on the first screen (a compact band, the split lives on Check & pay) */
html[data-concept="a"] .cla-ring__fg[data-frac="0.000"] { opacity: 0; }
html[data-concept="a"] .cl-strip__day.cla-heat:disabled .cla-covbar { display: none; }
html[data-concept="a"] .cla-split__k li { grid-template-columns: 10px auto minmax(0, 1fr); grid-template-areas: "sw n n" ". v p"; }
html[data-concept="a"] .cla-split__p { justify-self: start; align-self: end; padding-bottom: 2px; }
html[data-concept="a"] .cla-split__n { white-space: normal; }
html[data-concept="a"] .cla-contra .cla-split__k { display: none; }
html[data-concept="a"] .cla-contra .stats__cell:nth-child(n+2) .stats__label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
html[data-concept="a"] .cla-contra .stats__cell:nth-child(2) .stats__label::before { background: var(--accent); }
html[data-concept="a"] .cla-contra .stats__cell:nth-child(3) .stats__label::before { background: var(--ca-b2); }
html[data-concept="a"] .cla-contra .stats__cell:nth-child(4) .stats__label::before { background: var(--line-strong); }
html[data-concept="a"] .cla-contra .stats__cell:nth-child(5) .stats__label::before { background: repeating-linear-gradient(-45deg, var(--ok) 0 2px, transparent 2px 4px); }
@media (max-width: 719px) {
  html[data-concept="a"] .cl-day .cla-band { grid-template-columns: minmax(0, 1fr) 64px 84px; grid-template-areas: "main ring day"; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); }
  html[data-concept="a"] .cl-day .cla-band__split, html[data-concept="a"] .cl-day .cla-band__m { display: none; }
  html[data-concept="a"] .cl-day .cla-band__k { margin-top: 2px !important; font-size: 12px; line-height: 16px; }
  html[data-concept="a"] .cl-day .cla-band__fig { font-size: 22px; line-height: 28px; }
  html[data-concept="a"] .cl-day .cla-eyebrow { font-size: 11px; line-height: 14px; gap: 2px 6px; }
  html[data-concept="a"] .cl-day .cla-band__ring { width: 64px; height: 64px; }
  html[data-concept="a"] .cl-day .cla-band__pct b { font-size: 14px; line-height: 16px; }
  html[data-concept="a"] .cl-day .cla-band__pct span { font-size: 11px; line-height: 12px; }
  html[data-concept="a"] .cl-day .cla-payday { min-height: 72px; padding: var(--s-2); }
  html[data-concept="a"] .cl-day .cla-payday__n { font-size: 22px; line-height: 26px; }
  html[data-concept="a"] .cl-day .cla-payday__t { font-size: 11px; line-height: 13px; }
  html[data-concept="a"] .cl-day .cla-payday__d { margin-top: 0; font-size: 11px; }
  html[data-concept="a"] .cl-day .cla-heatkey { display: none; }
  /* R11.2 (UX-02, qa/r9-fixes; r6-redesign, r8-fixes): on a phone the Commissions day opens with the list tabs and the
     first truck on the first screen, and Check & pay with "Needs a decision" on it. So the band is one line on both:
     "To pay this week  KES 70,450". The eyebrow, ring and pay-day tile are left to the Pay weeks card and the paid sheet
     (the week strip / page title name the week, the switch the branch). A's page-head margin no longer doubles the gap. */
  html[data-concept="a"] :is(.cl-day, .cl-week) .cla-band { display: block; padding: var(--s-3) var(--s-4); }
  html[data-concept="a"] :is(.cl-day, .cl-week) .cla-band .cla-eyebrow, html[data-concept="a"] :is(.cl-day, .cl-week) .cla-band__ring,
  html[data-concept="a"] :is(.cl-day, .cl-week) .cla-payday, html[data-concept="a"] .cl-week .cla-band__m, html[data-concept="a"] .cl-week .cla-band__split { display: none; }
  html[data-concept="a"] :is(.cl-day, .cl-week) .cla-band__main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); }
  html[data-concept="a"] :is(.cl-day, .cl-week) .cla-band__k { margin-top: 0 !important; font-size: 13px; line-height: 18px; }
  html[data-concept="a"] .cl-week .cla-band__fig { font-size: 22px; line-height: 28px; }
  html[data-concept="a"] :is(.cl-day, .cl-week) > .page-head { margin-bottom: 0; }
}
@media (max-width: 719px) { html[data-concept="a"] .cla-contra .stats__cell .stats__label::before { display: none; } }
/* 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"] .cl-branch .seg__btn, html[data-concept="a"] .cl-paysheet .seg__btn { min-height: var(--tap); }