` in row headers are gone: they locally removed bold that no longer exists. */ .table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom:0; } /* COLUMN WIDTHS. Numeric columns (`align: 'right'`) shrink to their content and do not wrap; remaining width is distributed across text columns. Similar tables therefore align consistently throughout the portal without hand- measuring every column. `width:1%` is not a real measure, but the customary signal to the table layout to keep this column as narrow as possible. Numbers use tabular figures so amounts align vertically. */ .table td.text-right, .table tbody th.text-right, .table tfoot td.text-right, .table tfoot th.text-right { width:1%; white-space:nowrap; font-variant-numeric:tabular-nums; } .table thead th.text-right { width:1%; } /* Source order is the fix here: zebra and hover had equal specificity (0,2,3), with zebra last and winning, so hover did nothing on EVEN rows. Hover now follows zebra and uses the next step so the difference is visible on tinted rows. */ .table--zebra tbody tr:nth-child(even), .table--zebra tfoot tr:nth-child(even) { background:var(--color-secondary-50); } /* --- Compact density (C.table({ compact: true })) -------------------------- A second density for tables read by SCANNING rather than by reading: a catalogue of seventy-five fields, where the default 16px/24px cell at the CD's 18px type turns every row into a paragraph and puts eight rows on a screen. The numbers are the wireframe's own — 8px/12px cells at 14px — which is what fits a whole domain on one screen without a scrollbar. It is a MODIFIER, not a replacement: the default density stays the portal's, and a table only gets this when its caller says the content earns it. */ .table--compact { font-size:var(--fs-sm); } .table--compact thead th, .table--compact td, .table--compact tbody th, .table--compact tfoot th { padding:var(--sp-2) var(--sp-3); } /* The section head keeps its own rhythm, scaled by the same step. */ .table--compact .table__group > th { padding-top:var(--sp-2); padding-bottom:var(--sp-2); } .table--compact tbody + tbody > .table__group > th { padding-top:var(--sp-4); } /* --- Grouped tables (C.table({ groups })) --------------------------------- Each section is its own
, so nth-child already restarts per section. But the section HEADER is that tbody's first row, which shifts every stripe by one and opens each section on a tinted line. Counting from the header instead puts the first data row back on white, which is what makes a section read as a fresh start rather than a continuation. */ .table--zebra tbody > .table__group ~ tr:nth-child(even) { background:transparent; } .table--zebra tbody > .table__group ~ tr:nth-child(odd) { background:var(--color-secondary-50); } /* A repeated subhead shifts row parity once more; invert striping in that body. */ .table--zebra tbody:has(.table__subhead) > .table__group ~ tr:nth-child(odd) { background:transparent; } .table--zebra tbody:has(.table__subhead) > .table__group ~ tr:nth-child(even) { background:var(--color-secondary-50); } .table--zebra tbody > .table__subhead { background:transparent; } /* Keep the canonical head available to layout and assistive technology while repeated group-local heads provide the visible reading order. */ .table--grouped > thead { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* Group-local column labels are intentionally quieter than the canonical head. */ .table__subhead > td { padding-top:var(--sp-2); padding-bottom:var(--sp-2); font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.02em; border-bottom:var(--stroke-1) solid var(--color-border); } .table--compact .table__subhead > td { padding-top:var(--sp-1); padding-bottom:var(--sp-1); } .table__group > th { padding-top:var(--sp-3); padding-bottom:var(--sp-3); background:transparent; } /* Air between sections, on the header's padding rather than a margin: a table in border-collapse ignores margins on its rows. The first section takes the table's own top edge instead, or the head would sit off on its own. */ .table tbody + tbody > .table__group > th { padding-top:var(--sp-6); } .table__group-toggle { display:flex; align-items:center; gap:var(--sp-2); width:100%; padding:0; border:0; background:none; font:inherit; font-weight:var(--fw-bold); color:var(--color-text); text-align:left; cursor:pointer; } .table__group-toggle:focus-visible { outline:var(--stroke-2) solid var(--color-focus-ring); outline-offset:var(--stroke-2); } .table__group-chev { flex:none; transition:transform var(--duration-fast); color:var(--color-text-light); } .table__group-toggle[aria-expanded="true"] .table__group-chev { transform:rotate(90deg); } /* The count is context, not the name of the section. */ .table__group-n { font-weight:var(--fw-regular); color:var(--color-text-light); } .table__group-n::before { content:"("; } .table__group-n::after { content:")"; } /* … unless the table ITSELF sits on secondary-50. CD has exactly ONE neutral surface, used by both the tinted section band (.bg--secondary-50) and the table's header and zebra stripes. When nested, stripes and ground are identical: stripes become holes exposing the band, and only odd rows look like rows (user finding 2026-08-06, home page open-cases table). The STRIPES give up their tint: the table is already a white card with border and shadow, and rows are separated by dividers anyway. Applies to EVERY table on the band; the bug depended only on nesting, not on the page. */ .bg--secondary-50 .table--zebra tbody tr:nth-child(even), .bg--secondary-50 .table--zebra tfoot tr:nth-child(even) { background:transparent; } /* The HEADER does not. Dropped to transparent along with the stripes it became a white row among white rows, told apart only by its divider and uppercase type, and the column names read as a first entry (user finding 2026-08-12, home page open cases). One step down the same neutral ramp — secondary-100 against the band's secondary-50 — restores the header without inventing a second colour. */ .bg--secondary-50 .table thead th { background:var(--color-secondary-100); } /* Hover ONLY on clickable rows: CD tables define no row hover (table.postcss), and a static data table must not signal clickability. */ .table--rows-clickable tbody tr:hover { background:var(--color-secondary-100); } /* Whole row clickable (C.table `rowsClickable`): the cursor signals it, but interaction still runs through the row's link, so only cursor and no custom focus style belongs here. */ .table--rows-clickable tbody tr { cursor:pointer; } /* Click hint at the row end. A pointer reveals a clickable row only DURING hover; the angle signals it beforehand. Purely decorative (`aria-hidden` would need an element; ::after is absent from the accessibility tree anyway). The real link in the first cell still provides interaction. */ .table--rows-clickable tbody td:last-child, .table--rows-clickable tbody th:last-child { position:relative; padding-right:var(--sp-9); } .table--rows-clickable tbody tr > :last-child::after { content:""; position:absolute; right:var(--sp-3-5); top:50%; transform:translateY(-50%); width:var(--sp-4); height:var(--sp-4); background-color:var(--color-text-muted); -webkit-mask:url('../../assets/icons/ChevronRight.svg') no-repeat center/contain; mask:url('../../assets/icons/ChevronRight.svg') no-repeat center/contain; } .table--rows-clickable tbody tr:hover > :last-child::after { background-color:var(--color-primary-700); } /* The total row in tfoot is not clickable. */ .table--rows-clickable tfoot tr > :last-child::after { content:none; } @media (hover:none){ .table--rows-clickable tbody tr:hover { background:inherit; } /* Zebra striping survives tapping: the inherit rule above would otherwise remove it from tapped even rows (both consumers use zebra). */ .table--rows-clickable.table--zebra tbody tr:nth-child(even):hover { background:var(--color-secondary-50); } } /* Density + wrapping on narrow viewports (Item 2.11). tfoot th IS included: otherwise the total row shrinks only in value cells (td), leaving its label cell as the only one with full padding. */ @media (max-width:767.98px){ .table-wrapper .table thead th, .table-wrapper .table td, .table-wrapper .table tbody th, .table-wrapper .table tfoot th { padding:var(--sp-2) var(--sp-3); font-size:var(--text-sm); } .table td:first-child a, .table tbody th a { white-space:nowrap; } } /* The compact modifier follows the base recipe in source order, so it does not need an element-qualified specificity bump. */ .table--compact { border:0; box-shadow:var(--shadow-none); } .table--compact thead th, .table--compact td, .table--compact tbody th, .table--compact tfoot th { padding:var(--sp-2); font-size:var(--text-sm); } /* A footnote BELOW the table, for what the table does rather than what it holds — «click a row to open it» is an interaction, and there is nowhere else the reader would learn it. `note` (above the table) explains the data instead. Shared, value for value, with the tenant portal's `.table-hint`. */ .table-hint { margin-top:var(--sp-4); font-size:var(--text-xs); color:var(--color-text-muted); } /* ── ONE TABLE STYLE ────────────────────────────────────────────────────── Two rules that every table in the portal obeys, with no per-surface exceptions (docs/table-consistency.md). 1 · ICON SIZE. A glyph in a cell is 16px, the body text's own size, so a row reads as one line rather than as an icon with a caption. Cells previously carried 16px (`icon--base`, file glyphs) and 24px (`icon--md`, the saved star) in the same portal, which made two tables look like two components. */ .table__icon { width:var(--sp-4); height:var(--sp-4); flex:none; vertical-align:-.2em; } .table__icon + * { margin-left:var(--sp-2); } /* 2 · NO BOLD. Weight is not a column property: a bold first cell made every list look ranked, and different tables bolded different columns. The one exception is the TOTAL row in , where bold marks a different KIND of row rather than a more important one. */ .table tbody td, .table tbody th, .table tbody td *, .table tbody th * { font-weight:var(--fw-regular); } .table tfoot td, .table tfoot th, .table tfoot td *, .table tfoot th * { font-weight:var(--fw-bold); }