/* Quarry ERP mockup — Costs (R9 COSTS slice, R9-PLAN §2.13 F–I). Prefix cst-. Layout only: the rows, groups, stats,
 * sheets, segmented choices, notices and method picker are the shared R6/R8 components from app.css (press scale,
 * hover gating, motion and focus rings come from there). Tokens only, no colour literals, no animation of its own:
 * Mark paid and Approve are frequent actions, so nothing here moves. */

.cst { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); min-width: 0; }
.cst > .page-head { margin-bottom: 0; grid-template-columns: minmax(0, 1fr); }
/* the tab strip scrolls inside the page width instead of widening it (min-content of 4 tabs > 360 px) */
.cst .ph__toolbar, .cst .page-head__main, .cst .page-tools { min-width: 0; }
.cst .ph__toolbar .tabs { max-width: 100%; }
.cst-groups { min-width: 0; }

/* the one-line explanations under a sheet title or a list ("Meru · October 2026 · due Wed 28 Oct") */
.cst-lead { margin: 0 0 var(--s-3); color: var(--ink-2); font: var(--t-meta); }
.cst-note { margin: var(--s-2) 0 0; color: var(--ink-3); font: var(--t-meta); max-inline-size: 65ch; text-wrap: pretty; }
.cst-none { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-4); color: var(--ink-3); font: var(--t-meta); }
.modal .cst-none { padding-inline: 0; }

/* a computed amount always shows its sum (FINDINGS rule 4): "Salary 18,000 − advances 2,000 = KES 16,000 due" */
.cst-sum { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-input); background: var(--surface-2); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cst-sum:empty { display: none; }

/* a form-level error line (an error that belongs to no single field) takes no room until it has text */
.cst-err { margin: 0; }
.cst-err .field__error:empty { display: none; }

/* sheet bodies: one column of fields with the usual rhythm */
.cst-sheet .modal__body { display: grid; gap: var(--s-3); }
.cst-sheet .field { margin: 0; }
.cst-seg { margin-top: var(--s-1); }
/* the choices inside a Costs sheet fit four to a row at 360 px: tighter padding, the thumb alone marks the choice */
.cst-seg.seg--block { grid-template-columns: repeat(auto-fit, minmax(min(100%, 72px), 1fr)); }
.cst-seg .seg__btn { padding-inline: var(--s-2); }
.cst-seg .seg__btn[aria-checked="true"]::before { display: none; }
/* two big plain-words choices ("Running cost" / "Something you keep") stack on a phone and may wrap */
.cst-seg.seg--lg { grid-template-columns: minmax(0, 1fr); }
.cst-seg.seg--lg .seg__label, .cst-seg.seg--lg .seg__sub { white-space: normal; text-align: center; }
@media (min-width: 560px) { .cst-seg.seg--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cst-mtot { padding-inline: var(--s-4); }
.cst-pick { margin-top: var(--s-1); }
.cst-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 379px) { .cst-two { grid-template-columns: minmax(0, 1fr); } }

/* read-only facts in a review / detail sheet */
.cst-dl { display: grid; margin: 0; }
.cst-dl > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.cst-dl > div:last-child { border-bottom: 0; }
.cst-dl dt { color: var(--ink-3); font: var(--t-meta); }
.cst-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* employee page: ‹ October 2026 › */
.cst-month { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
.cst-month__label { margin: 0; text-align: center; font: var(--t-h3); }
.cst-month__btn { min-width: 48px; min-height: 48px; padding: 0; justify-content: center; }
.cst-actions { display: grid; gap: var(--s-2); }
.cst-actions:empty { display: none; }
.cst-wide { width: 100%; min-height: 48px; justify-content: center; }
@media (min-width: 720px) { .cst-actions { grid-template-columns: repeat(auto-fit, minmax(0, 18rem)); } }

/* vendor search */
.cst-search { margin: 0; }
.cst-search .input-group__affix { color: var(--ink-3); }

/* list rows with a Mark paid / Review pill keep the pill clear of a long name */
.cst .lrow--split .lrow__main { min-width: 0; }

/* wide screens: Running costs | Investments side by side */
@media (min-width: 1024px) {
  .cst-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cst-fixed .cst-groups, .cst-staff .cst-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cst-fixed .cst-groups > :first-child, .cst-staff .cst-groups > :first-child { grid-column: 1 / -1; }
}

/* ================================================================== R11.1 concept A "Control Room" — scoped, A only.
 * The hero band per view (burn ring, month strip of due dates, payroll, vendor ranking, company spread) and the row
 * leads (date chips, initials). Figures in Geist Mono; colours from A's tokens only. */
html[data-concept="a"] .cst-a-band { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 1024px) {
  html[data-concept="a"] .cst-a-band { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
  html[data-concept="a"] .cst-a-band--staff { grid-template-columns: minmax(0, 2fr) minmax(220px, .8fr); }
}
html[data-concept="a"] .cst-a-band .ca-card { gap: var(--s-2); }
html[data-concept="a"] .cst-a-band .ca-kpi--lead { min-height: 0; }
html[data-concept="a"] .cst-a-big { margin: 2px 0 6px; font: 500 30px/36px var(--font-mono); letter-spacing: -.04em; white-space: nowrap; }
@media (max-width: 379px) { html[data-concept="a"] .cst-a-big { font-size: 26px; line-height: 32px; } }
html[data-concept="a"] .cst-a-burn__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
html[data-concept="a"] .cst-a-burn__fig { min-width: 0; }
html[data-concept="a"] .cst-a-burn__fig .ca-stat__m { gap: 6px; }

/* progress ring */
html[data-concept="a"] .cst-a-ring { position: relative; display: grid; place-items: center; width: 92px; height: 92px; flex: none; }
html[data-concept="a"] .cst-a-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-concept="a"] .cst-a-ring__t { fill: none; stroke: var(--surface-2); stroke-width: 8; }
html[data-concept="a"] .cst-a-ring__f { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
html[data-concept="a"] .cst-a-ring--ok .cst-a-ring__f { stroke: var(--ok); }
html[data-concept="a"] .cst-a-ring--bad .cst-a-ring__f { stroke: var(--danger); }
html[data-concept="a"] .cst-a-ring__m { position: relative; display: grid; justify-items: center; line-height: 1; }
html[data-concept="a"] .cst-a-ring__m b { font: 500 18px/22px var(--font-mono); letter-spacing: -.03em; color: var(--ink); }
html[data-concept="a"] .cst-a-ring__m i { font: 500 11px/13px var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* category split bar + legend */
html[data-concept="a"] .cst-a-split { display: flex; gap: 3px; height: 10px; border-radius: 5px; overflow: hidden; }
html[data-concept="a"] .cst-a-split i { display: block; min-width: 4px; }
html[data-concept="a"] .cst-a-legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
html[data-concept="a"] .cst-a-legend li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 4ch; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; line-height: 20px; color: var(--ink-2); }
html[data-concept="a"] .cst-a-legend li + li { border-top: 1px solid var(--line); }
html[data-concept="a"] .cst-a-legend li > i, html[data-concept="a"] .cst-a-key i { display: block; width: 8px; height: 8px; border-radius: 2px; }
html[data-concept="a"] .cst-a-legend b { font: 500 13px/20px var(--font-mono); color: var(--ink); letter-spacing: -.02em; }
html[data-concept="a"] .cst-a-legend em { font: 500 11px/20px var(--font-mono); font-style: normal; color: var(--ink-3); min-width: 3ch; text-align: right; }

/* the month strip: one cell a day, a pin on each due date */
html[data-concept="a"] .cst-a-days { display: grid; grid-template-columns: repeat(var(--n, 31), minmax(0, 1fr)); gap: 2px; margin: var(--s-2) 0 0; padding: 0 0 18px; list-style: none; }
html[data-concept="a"] .cst-a-day { position: relative; min-width: 0; }
html[data-concept="a"] .cst-a-day__c { display: grid; place-items: center; height: 34px; border-radius: 4px; background: var(--surface-2); }
html[data-concept="a"] .cst-a-day.is-past .cst-a-day__c { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
html[data-concept="a"] .cst-a-day.is-today .cst-a-day__c { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
html[data-concept="a"] .cst-a-day__c i { display: block; width: min(10px, 70%); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
html[data-concept="a"] .cst-a-day__n { position: absolute; top: 38px; left: 50%; transform: translateX(-50%); font: 500 11px/13px var(--font-mono); color: var(--ink-3); white-space: nowrap; }
html[data-concept="a"] .cst-a-day.is-today .cst-a-day__n { color: var(--accent-text); }
html[data-concept="a"] .cst-a-day:first-child .cst-a-day__n { left: 0; transform: none; }
html[data-concept="a"] .cst-a-day:last-child .cst-a-day__n { left: auto; right: 0; transform: none; }
html[data-concept="a"] .cst-a-key { display: flex; flex-wrap: wrap; gap: 4px var(--s-3); margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .cst-a-key span { display: inline-flex; align-items: center; gap: 6px; }
html[data-concept="a"] .cst-a-nexts { display: grid; margin: 0; padding: 0; list-style: none; }
html[data-concept="a"] .cst-a-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 8px 0; }
html[data-concept="a"] .cst-a-next + .cst-a-next { border-top: 1px solid var(--line); }
html[data-concept="a"] .cst-a-next__b, html[data-concept="a"] .cst-a-next__e { display: grid; min-width: 0; }
html[data-concept="a"] .cst-a-next__t { font: 500 14px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-concept="a"] .cst-a-next__m { font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .cst-a-next__e { justify-items: end; gap: 3px; }
html[data-concept="a"] .cst-a-next__e b { font: 500 14px/20px var(--font-mono); letter-spacing: -.02em; }

/* the date chip and initials in a row's lead slot */
html[data-concept="a"] .cst-a-date { display: inline-grid; justify-items: center; align-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
html[data-concept="a"] .cst-a-date b { font: 600 16px/18px var(--font-mono); letter-spacing: -.03em; color: var(--ink); }
html[data-concept="a"] .cst-a-date i { font: 500 11px/13px var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
html[data-concept="a"] .cst-a-date--bad { background: var(--danger-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
html[data-concept="a"] .cst-a-date--bad b, html[data-concept="a"] .cst-a-date--bad i { color: var(--danger); }
html[data-concept="a"] .cst-a-date--warn { background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn-bar) 40%, transparent); }
html[data-concept="a"] .cst-a-date--warn b, html[data-concept="a"] .cst-a-date--warn i { color: var(--warn); }
html[data-concept="a"] .cst-a-date--ok { background: var(--ok-soft); box-shadow: none; }
html[data-concept="a"] .cst-a-date--ok b, html[data-concept="a"] .cst-a-date--ok i { color: var(--ok); }
html[data-concept="a"] .cst-a-date--accent { background: var(--accent-soft); box-shadow: none; }
html[data-concept="a"] .cst-a-date--accent b, html[data-concept="a"] .cst-a-date--accent i { color: var(--accent-text); }
html[data-concept="a"] .cst-a-av { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ca-chrome); color: var(--ca-chrome-ink); font: 500 13px/1 var(--font-mono); letter-spacing: .02em; flex: none; }
html[data-concept="a"] .cst-a .lrow__lead { display: flex; align-items: center; flex: none; }
html[data-concept="a"] .cst-a .lrow__value { font-family: var(--font-mono); font-weight: 500; letter-spacing: -.03em; }
html[data-concept="a"] .cst-a .glist__label { font-family: var(--font-mono); letter-spacing: .1em; }

/* bars (payroll by branch, vendor ranking, company spread) */
html[data-concept="a"] .cst-a-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
html[data-concept="a"] .cst-a-bar i { display: block; height: 100%; border-radius: 3px; min-width: 2px; transform-origin: left; }
html[data-concept="a"] .cst-a-brows, html[data-concept="a"] .cst-a-assets { display: grid; margin: 0; padding: 0; list-style: none; }
html[data-concept="a"] .cst-a-brow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "bar bar" "m m"; gap: 4px var(--s-3); align-items: center; padding: 10px 0; }
html[data-concept="a"] .cst-a-brow:has(.cst-a-av) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av n v" "av bar bar"; }
html[data-concept="a"] .cst-a-brow + .cst-a-brow { border-top: 1px solid var(--line); }
html[data-concept="a"] .cst-a-brow > .cst-a-av { grid-area: av; width: 32px; height: 32px; font-size: 11px; }
html[data-concept="a"] .cst-a-brow__n { grid-area: n; display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 14px/20px var(--font); }
html[data-concept="a"] .cst-a-brow__n > i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
html[data-concept="a"] .cst-a-brow__n em, html[data-concept="a"] .cst-a-asset__n em, html[data-concept="a"] .cst-a-rk__n em { font-style: normal; font-size: 12px; color: var(--ink-3); }
html[data-concept="a"] .cst-a-brow > b, html[data-concept="a"] .cst-a-asset > b { grid-area: v; font: 500 14px/20px var(--font-mono); letter-spacing: -.02em; text-align: right; }
html[data-concept="a"] .cst-a-brow > .cst-a-bar, html[data-concept="a"] .cst-a-asset > .cst-a-bar { grid-area: bar; }
html[data-concept="a"] .cst-a-brow__m, html[data-concept="a"] .cst-a-asset__m { grid-area: m; font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .cst-a-asset { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "bar bar" "m m"; gap: 4px var(--s-3); padding: 8px 0; }
html[data-concept="a"] .cst-a-asset + .cst-a-asset { border-top: 1px solid var(--line); }
html[data-concept="a"] .cst-a-asset__n { grid-area: n; display: grid; min-width: 0; font: 500 14px/20px var(--font); }
html[data-concept="a"] .cst-a-pd { align-content: center; }
html[data-concept="a"] .cst-a-payday { min-height: 132px; align-content: center; gap: 2px; }
html[data-concept="a"] .cst-a-payday .ca-payday__n { font: 500 40px/44px var(--font-mono); letter-spacing: -.04em; }
html[data-concept="a"] .cst-a-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-2) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
html[data-concept="a"] .cst-a-kv dt { font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .cst-a-kv dd { margin: 0; font: 500 15px/22px var(--font-mono); letter-spacing: -.03em; white-space: nowrap; }
html[data-concept="a"] .cst-a-rk { display: grid; margin: 0 calc(-1 * var(--s-2)); padding: 0; list-style: none; }
html[data-concept="a"] .cst-a-rk__b { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(48px, 30%) auto; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: 6px var(--s-2); border: 0; border-radius: var(--r-input); background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
html[data-concept="a"] .cst-a-rk__r { font: 500 12px/1 var(--font-mono); color: var(--ink-3); }
html[data-concept="a"] .cst-a-rk__n { display: grid; min-width: 0; font: 500 14px/20px var(--font); }
html[data-concept="a"] .cst-a-rk__b > b { font: 500 14px/20px var(--font-mono); letter-spacing: -.02em; text-align: right; }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] .cst-a-rk__b:hover { background: var(--surface-3); } }
html[data-concept="a"] .cst-a-rk__b:active { transform: scale(.99); }
html[data-concept="a"] .cst-a-band.ca-enter .cst-a-bar i { animation: ca-grow 600ms var(--ease-out) both; animation-delay: 200ms; }
html[data-concept="a"] .cst-a-band.ca-enter .cst-a-ring__f { animation: cst-a-ring 900ms var(--ease-out) both; animation-delay: 160ms; }
@keyframes cst-a-ring { from { stroke-dasharray: 0 400; } }
html[data-concept="a"].no-motion .cst-a-band * { animation: none !important; transition: none !important; }
@media (max-width: 719px) {
  html[data-concept="a"] .cst-a .lrow__lead .cst-a-date { width: 36px; height: 40px; border-radius: 7px; }
  html[data-concept="a"] .cst-a .lrow__lead .cst-a-date b { font-size: 14px; line-height: 16px; }
  html[data-concept="a"] .cst-a .lrow__lead .cst-a-av { width: 34px; height: 34px; font-size: 12px; }
  html[data-concept="a"] .cst-a .lrow { column-gap: 10px; }
  html[data-concept="a"] .cst-a .lrow--split .lrow__btn { padding-inline: 12px; }
  html[data-concept="a"] .cst-a-ring { width: 80px; height: 80px; }
}
html[data-concept="a"] .cst-a-bar--stack { display: flex; gap: 2px; }
html[data-concept="a"] .cst-a-bar--stack i { border-radius: 0; min-width: 0; }
html[data-concept="a"] .cst-a-pd { grid-template-rows: 1fr auto; }
html[data-concept="a"] .cst-a-pd .cst-a-payday { min-height: 100%; }
@media (max-width: 419px) { html[data-concept="a"] .cst-a.cst-company .lrow__lead { display: none; } }