/* ==========================================================================
   The arrears screen (/arrears), drawn to the approved example screens' Arrears board.

   Everything here builds on the design system's tokens and this file adds none of its own. THE §6.2 BAND RAMP IS
   NOT HERE: it began in this file, on the reasoning that an ordinal severity scale is not a role a design
   system has a token for and belongs beside the screen that draws it. That was wrong for a plain reason —
   other screens came to draw the same scale, and a stylesheet is a GLOBAL namespace, so each file defining
   `.band-rule` for itself is another rule at the same specificity, of which only the last one linked takes
   effect, on every screen. It is the design system's now, with its ramp, its geometry, its monochrome proof
   and its print and forced-colours blocks; `StylesheetTests` is what keeps it from coming back.

   The list screen's composition — the lead figure, the filter bar, a group's title, a note row, a cell's
   tags — is app.css's, for the registers drawn to this board to share. What is left here is this grid's own:
   its group rows' ground, the legend's layout, and what it does on paper.
   ========================================================================== */

/* A band's group row takes the header band's own surface, so a group reads as a heading. */
.arrears-grid tr.group-head > * { background: var(--surface-subtle); }

/* --- The legend ---------------------------------------------------------- */

.band-scale .scale {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.band-scale .scale li {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.band-scale .scale .band-name { width: 9rem; }

/* In the narrow shell the band's column is as narrow as its pips, so its row's title has the address column's width
   too (the usability brief's item 8). What it changes is where the title wraps, a matter of appearance alone. */
@media screen and (not (min-width: 56.25rem)) {
    .arrears-grid col:first-child { width: 4.5rem; }
    /* ...and where that is not room for a band's pips, its name and its count on one line, the count moves under them
       rather than the name breaking word by word beside it (the usability brief's item 9). A title that can wrap no
       longer holds the address column open, so the address cell holds itself open instead: enough for a street name
       on a line. Appearance alone, as above. */
    .arrears-grid .group-title { flex-wrap: wrap; row-gap: var(--space-4); }
    .arrears-grid tbody tr:not(.group-head) > td:nth-child(2) { min-width: 9rem; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
    /* The band ramp is printed by the design system, which owns the scale for every screen that draws it. */

    /* The grouping toggle is a control, and a sheet of paper has none. The bar itself stays: the design
       system prints the band in force as words and takes the other tabs away, and the Landlord row's chip, a
       link kept for its words, says whose rows these are, so a filtered grid is not printed as though it were
       the whole firm's. */
    .filters > .group-toggle { display: none; }

    /* THE ASIDES PRINT OPEN. A closed <details> prints its summary and nothing else, and this grid is
       printed to be read away from the screen. The key: the sheet would carry a column of pips and rules and no
       legend for them, which is the one failure the ordinal encoding cannot absorb — worse with the grouping
       off, where there are no band headers either and a row's own band name is `.visually-hidden`, which is
       clipped and does not print. The duty and the law beside a figure: the notice or the note says they
       exist, and paper cannot open the aside to read them. The `::details-content` override is what does the
       work on current browsers; the `display` one is belt and braces for an engine that hides the light-DOM
       child instead. */
    details.prints-open { display: block; }
    details.prints-open > summary { list-style: none; }
    /* ...and the chevron goes, since it would point closed over an aside printed open. */
    details.prints-open > summary > .icon { display: none; }
    details.prints-open > .aside-body { display: block !important; }
    details.prints-open::details-content { content-visibility: visible !important; display: block; }
}