`, a shaded `| ` composites over it instead, which is what the tints are
written for. Every ground in this file follows that rule; see "Section depth" below. */
.report-table tbody tr:hover {
background: #fafafa;
}
/* ── Alignment and column roles ──────────────────────────────────────────── */
/* ⚠️ Written as `.report-table th.align-*` / `td.align-*`, NOT as bare `.align-*` utilities —
the chassis could not otherwise win its own alignment rule. The base rule above declares
`text-align: left` on `.report-table th, .report-table td` at specificity (0,1,1), and a bare
class answers at (0,1,0), so it lost on every cell. The visible defect was that
`js/uninvoiced-report-table.js`'s `align` column option did nothing: every column declaring
`align: "right"` — the Un-invoiced Approved Task Report's money columns, the AR Report's aging
and past-due columns, and the Rep AR/AP roster's whole right-hand half — rendered left. Do not
"simplify" these back to bare selectors.
Do not fix it from the other end either, by lowering the base rule (wrapping its subject in
`:where()`, say). Every host override of a cell in this component is already written at (0,1,1)
or (0,2,1) against that base — `.uat-task-table th` in css/uninvoiced-report.css,
`.report-table td.ar-name` in ar-report.html, `.report-table td.is-sample` in
my-ar-ap-report.html — and dropping the base would re-resolve all of them, not just alignment.
The default is untouched: a column that declares no `align` still takes its left from the base
rule, and these fire only on a cell that carries the class. */
.report-table th.align-left,
.report-table td.align-left {
text-align: left;
}
.report-table th.align-right,
.report-table td.align-right {
text-align: right;
}
.report-table th.align-center,
.report-table td.align-center {
text-align: center;
}
/* Tabular figures so numeric columns compare down the page rather than jittering on digit width. */
.col-money {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ISH-929: the vertical rules are gone. The reference table draws hairlines UNDER rows and nowhere
else, and a table that rules horizontally everywhere and vertically in exactly one place reads as
having a seam rather than an emphasis. The argument they were added on — "the one column read
across rather than down" — is still right; it is the TREATMENT that was wrong. The emphasis moves
into the number instead, which is how the reference marks its own most-read column
(`.unattributed-table td.uab-fees`: 800 weight in --text, no borders). */
.col-total {
font-weight: 800;
color: var(--text);
}
.report-table a {
color: var(--text);
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid transparent;
}
.report-table a:hover {
color: var(--red);
border-bottom-color: currentColor;
}
/* ── Muted cell conventions ───────────────────────────────────────────────────
*
* ⚠️ **This file used to say an empty money cell must render "$0.00", because a blank reads as a
* rendering failure. ISH-901 retired that rule deliberately — do not reinstate it without
* re-reading why.**
*
* It was written for a table with one or two money columns. This report has seven aging buckets,
* and `.docs/AGENT_GUIDE.md` §CX.4 records that the 0-7 bucket carries ~85% of both the value and
* the task count — so on a typical row six of them are empty, and "$0.00" six times across a third
* of the table's width reads as loudly as real money while saying nothing.
*
* The sibling island had already reached the same conclusion for these same seven columns
* (`react-app/src/broker-uninvoiced/App.tsx`), so the two surfaces now agree rather than
* contradicting each other.
*
* What keeps the original concern answered: **an em dash is a rendered value.** A cell that failed
* to load is empty, and empty still looks like a bug. The caller renders the dash; this file only
* quiets it.
*
* `.is-unassigned` is italic as well as quiet, because "Unassigned" is a real finding — a gap
* somebody has to close — and it keeps its word rather than becoming a dash.
*/
.is-zero {
/* Pinned with the header label (ISH-929) rather than left on the page token — same class of
value, and on the slate scale the page token renders this dash at 2.56:1. */
color: var(--rt-label-color);
}
.is-unassigned {
color: var(--text-secondary);
font-style: italic;
}
/* ── Sortable headers ────────────────────────────────────────────────────── */
.th-sort {
font: inherit;
font-size: inherit;
font-weight: inherit;
text-transform: inherit;
letter-spacing: inherit;
color: inherit;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.th-sort:hover {
color: var(--text);
}
/* Idle sortable columns reserve the arrow's width, so sorting does not shift the header row
sideways. The glyph is only emitted on the active column. */
.report-table th.is-sortable .th-sort::after {
content: "";
display: inline-block;
width: 0.75em;
margin-left: 0.15em;
opacity: 0.45;
}
.report-table th[aria-sort="ascending"] .th-sort::after {
content: "\25B2";
opacity: 1;
}
.report-table th[aria-sort="descending"] .th-sort::after {
content: "\25BC";
opacity: 1;
}
/* The active column darkens rather than turning red. Red is this app's accent for a selected or
actionable thing; a sorted column is neither, and on a page where links and the aged-money tile
already carry red, a red header competes with them for the same meaning. */
.report-table th[aria-sort] .th-sort {
color: var(--text);
}
/* ── Totals row ───────────────────────────────────────────────────────────────
*
* Sits ABOVE the body, as it does in the source spreadsheet.
*
* ⚠️ **No fill.** It used to carry `#eef2f7`, which made it the darkest band in the table and put
* it directly under a header that had just lost its own ground — so it read as the header and the
* real header read as a caption (ISH-901). Weight and the 2px rule separate it from the body; that
* is enough, and it keeps the header as the table's only boundary.
*/
/* ⚠️ The 2px is deliberate and survives ISH-929's pass at matching the Unattributed Brokers table.
That table has no totals row at all, so it offers no opinion here — and this rule is what
separates the totals from the first data row. Softening it to a hairline "for uniformity" would
be copying a silence, not a decision. */
.totals-head td {
border-bottom: 2px solid var(--rt-border);
padding: 0.4rem 0.75rem;
/* ⚠️ One step DOWN the scale from the body's 0.8125rem (decision 2026-09-14). The totals are a
reference line, not the table's loudest row — and ISH-901's rule still holds either way: the
header above stays the quieter of the two because it is 0.6875rem in the label colour. */
font-size: 0.75rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* The label cell, quieter still — it names the row rather than carrying a figure. */
.totals-head td:first-child + td,
.totals-head td.col-expand + td {
font-size: 0.5625rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-secondary);
}
/* ── Aging heat, opt-in (ISH-924) ────────────────────────────────────────────
A money cell can be shaded by how much of its row it carries, so a row shows at a glance where
its own money sits. ⚠️ OPT-IN: nothing here applies unless a column supplies a `cellClass`, so
linking this file never shades an existing table.
Tints of --red rather than a separate palette, because on this report a large aged balance is
the thing to act on and red is already this app's attention colour.
⚠️ The darkest step's alpha is set by the WORST case, which is a heat-4 cell on a hovered
depth-2 row — the deepest ground in the file, not the card. What sits there is --text, and only
--text: a money figure goes --red through `.is-negative` alone, and in
js/uninvoiced-approved-tasks-view.js that class and the heat class are derived from the SAME
cents by complementary conditions (`cellClass` returns "" for `cents <= 0`; `.is-negative`
applies for `cents < 0`). A red figure therefore never carries a heat class.
⚠️ That is a coincidence of two conditions rather than a guarantee, and it is what lets this
alpha be tuned against --text alone. Shade a negative bucket — by absolute value, say — and
--red lands on heat-4 at 3.75:1, under the 4.5:1 that applies at this size and weight.
js/uninvoiced-approved-tasks-render.test.js renders that pairing's absence to hold it.
Measured on the worst ground at this alpha: --text 9.10:1, well clear of the 7:1 this scale has
always promised. The shading must never be the reason a number is hard to read.
⚠️ This alpha and the depth grounds below are ONE decision. Darken a ground and the --text
figure has to be re-measured, not assumed — js/report-table.test.js recomputes it from whatever
alpha and ground are in this file. The 7:1 promise leaves real headroom here (it holds past
0.40), so this alpha is chosen for the scale's own legibility, not pinned by contrast — it is
0.28 because that is the step the scale was designed around, and it briefly went to 0.24 to buy
back --red contrast that no figure was reading. */
.cell-heat-1 {
background: rgba(166, 38, 38, 0.05);
}
.cell-heat-2 {
background: rgba(166, 38, 38, 0.1);
}
.cell-heat-3 {
background: rgba(166, 38, 38, 0.18);
}
.cell-heat-4 {
background: rgba(166, 38, 38, 0.28);
}
/* ⚠️ A credited task makes a bucket negative, and this report really does carry them. Coloured
rather than left to a bare minus sign, which is one glyph wide and easy to miss in a grid of
right-aligned money. */
.is-negative {
color: var(--red);
font-weight: 600;
}
/* ── Section depth (ISH-933; bracketed by ISH-962) ───────────────────────────
*
* The table sections rather than regroups: a broker row opens onto its client rows, which open
* onto tasks. Every level is a real ` |
`, never on its `| `s (ISH-962) ──────────────────
*
* ISH-933 shipped these fills on the cell, and `.report-table tbody tr[data-depth] td` is (0,2,2)
* against `.cell-heat-4`'s (0,1,0) — so opening a broker painted over its own aging heat, and all
* of its clients', in the one state where somebody is reading it closely. New Generation Agg
* Transport carried 83% of its late money in 8-14 days and drew none of it.
*
* Declared on the row, the cascade never arises: a ` | ` background composites over its row's,
* which is exactly what the `rgba()` tints exist for. **Do not move a ground back onto a cell.**
*
* ── The open section is bracketed, not filled ───────────────────────────────
*
* An open row keeps the card's own ground and takes its emphasis from weight; a rail runs down the
* left edge of the block — solid on the open row, 30% beneath it — and one rule closes the group
* where the next top-level row starts.
*
* ⚠️ The children's ground used to be a single step off white, and a single step off white is not
* a step anybody sees. On a broker with five clients the block read as five more top-level rows:
* the rail was the only surviving signal, and on the AR reports it is 3px at the far left of a
* ten-column table. The grounds below are one real step apart each, and they form a LADDER whose
* ordering is the actual contract — card 255, top-level hover 250, depth-1 246, depth-2 238,
* depth hover 230. Darken one without the others and the ladder inverts: a hovered nested row
* would come out lighter than a nested row at rest.
*
* ⚠️ The greys are NEUTRAL — equal r/g/b — and that is the point of them, not a rounding of the
* slate values they replaced. They used to be `#f7f8fb` / `#eef0f5` / `#e7eaf1`, which are cool
* blue-greys; the AR Report's age ramp is `rgba(71, 85, 105, .045–.195)`, which is ALSO a cool
* blue-grey. Two grey systems in the same hue family, one on the `tr` and one compositing over it
* on the `td`, read on screen as a single wash — the depth step and the age step became
* indistinguishable from each other on exactly the cells where both matter. Neutral greys have no
* hue to collide with, so the ramp stays legible as a ramp at every depth. Do not "harmonise"
* these back onto the slate scale; that is the defect.
*
* ⚠️ The top-level `tr:hover` above is deliberately NOT part of this ladder and was left where it
* was. It is a transient state on an un-nested row; sliding it down with the grounds would make
* the mouse, rather than the structure, the loudest thing on the table.
*
* That leaves the heat the only colour in the table, which is the point of the report: a fill
* heavy enough to mark the open section is also heavy enough to compete with the shading it sits
* behind.
*/
/* ⚠️ **NO GROUND AT ANY DEPTH.** §KS took the ladder off the slate scale so it stopped colliding
with the age ramp; this removes the ladder. Four grey steps is more than the eye resolves on the
AR Report's normal three-level grain, and every one of them lands under figures that are the
point of the table.
Depth is DRAWN now — the drawer rails below, and the cut that lifts an open block out of the
table. The ground is declared as the token rather than omitted, because `.is-expanded` still has
to have something to beat when an open row is itself a child, which is the ISH-962 failure this
rule was written for. */
.report-table tbody tr[data-depth] {
background: var(--card-bg);
}
.report-table tbody tr[data-depth] td {
font-size: 0.78125rem;
border-bottom-color: #f2f2f4;
}
/* ── The drawer ──────────────────────────────────────────────────────────────
* The rail sits on the FIRST cell — the expand column — so it runs down the outside of the block
* and the toggles sit inside it.
*
* ⚠️ **Each level's rail steps IN, and that step is the depth signal now that no ground is.** The
* cell paints a band of card colour to the rail's left, so a block reads as sitting inside the one
* above it, and the number of rails on screen is the number of levels you are down. That is
* countable. A grey is judged, which is why four of them stopped working.
*
* ⚠️ **Shadow ORDER is load-bearing.** Inset shadows paint first-on-top, so the card-colour band is
* declared FIRST and the rail shows only past where the band ends. Reverse them and the band covers
* the rail completely — and it fails silently, because both rules are still valid CSS.
*
* ⚠️ An inset shadow, not a `border-left`: a border in a `border-collapse` table takes real layout
* width, so the first column would widen the moment anything opened.
*
* ⚠️ **A closed row's rail is NEUTRAL; red marks only the row you opened.** `ar-report.html` is
* explicit that age and lateness must not share an encoding, and red is its past-due colour —
* spending it on every nested row puts structure into the one colour a reader scans for late money.
* One red rail per open row is the entire budget. */
.report-table tbody tr[data-depth] td:first-child {
box-shadow:
inset 5px 0 0 var(--card-bg),
inset 8px 0 0 #d4d4d4;
}
.report-table tbody tr[data-depth="2"] td:first-child {
box-shadow:
inset 10px 0 0 var(--card-bg),
inset 13px 0 0 #d4d4d4;
}
.report-table tbody tr[data-depth] .col-broker {
padding-left: 1.1rem;
}
.report-table tbody tr[data-depth] .col-client {
padding-left: 1.1rem;
}
.report-table tbody tr[data-depth="2"] .col-client {
padding-left: 2.2rem;
}
/* The identity span (ISH-962) — a client row's Broker and Client columns as one cell, so a long
name reads on one line instead of wrapping inside a narrow cell with an empty one beside it.
⚠️ It carries `.col-client` as well, so the depth indent above applies to it unchanged and stays
declared in exactly one place.
⚠️ NAME columns only. Every money column keeps its own cell, so a figure still lands under its
own header — the rule the whole sectioned layout exists to protect. And the run starts at
Broker, not at Rep: a name spanning from the first column would begin to the LEFT of the broker
name above it, which reads as a level up rather than a level down. */
.col-identity-span {
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
/* The LOWER half of the cut. An open block is bounded by page colour above and below, so it reads
as lifted out of the table rather than shaded inside it — which is what somebody recognises as
"this is a separate thing" without having to be taught the convention.
⚠️ `--page-bg` and 14px, not a border colour and 1px: the point is that the table looks
INTERRUPTED. A hairline reads as a rule between two rows, which is the opposite claim.
⚠️ Keyed off the SIBLING rather than a class on the last child, so it stays correct at every
grain and asks nothing of the renderer. */
/* ⚠️ `:not(.expanded-row)` is the whole correctness of this rule, and it was MISSING.
The detail panel is a ` |