/* ==========================================================================
   Today, the dashboard.

   ALMOST ALL OF IT IS THE DESIGN SYSTEM'S: the row of panels (.panel-row), each panel's head, body and foot,
   the lead figure's face (.money-display), its caption (.figure-caption), the scale the arrears bands and the
   compliance steps are both drawn on (.scale), the quiet way out at a panel's foot (.quiet-go), and the empty
   answers. What is left here is what the approved Today boards place that the system does not, among it the arrears
   scale's glyph at the end of its panel's heading row, a panel body's first and last blocks sitting on its
   padding, and a compliance step with nothing on it receding. A band's amount takes the scale's column form
   through Money's AtEnd.
   ========================================================================== */

/* The scale's glyph, drawn once on the panel, closes the heading row rather than trailing the question. */
.panel-head > .at-end { margin-left: auto; }

/* A panel leads with its figure and ends on its note, and both sit on the panel's padding rather than on
   margins of their own, so a panel ending in a note is no taller than one ending in its scale — the row
   takes its tallest panel's height. The lead figure is a paragraph, or a block around Money where the figure
   is money: the design system's "p .money" would otherwise set a sterling figure back to a sentence's size. */
.panel-row .panel-body > :first-child,
.lead-figure { margin-top: 0; }
.panel-row .panel-body > :last-child { margin-bottom: 0; }
.lead-figure { margin-bottom: 0; }

/* A step nothing is on is still drawn — the legend is the answer's, not a list written on the screen — but
   it recedes, so the steps that need work are what the eye lands on. */
.scale li.comp-empty .comp-name,
.scale li.comp-empty .count { color: var(--text-faint); }

/* A licensing line with nothing on it recedes as an empty compliance step does, and for the same reason. */
.scale li.scale-empty { color: var(--text-faint); }

/* The addresses to check are not a warning, so their line stands apart from the warnings' lines, and from "No warnings"
   (DEC-0363), on a rule of its own. */
.scale.scale-apart { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--border-subtle); }

/* Four panels on Today sit two by two wherever the sidebar is drawn, so the fourth does not stand alone under a row of
   three; below that width the design system's own fit stands. */
@media (min-width: 56.25rem) {
    .panel-row:has(> .panel:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The set-up list (DEC-0470): a row a step, its name at the start and its tag or its button, where it has one, at the
   end, each row one line high, held to a reading width so a row's two ends stay in one glance. */
.setup-list { max-width: 40rem; }
.setup-steps { list-style: none; margin: 0; padding: 0; }
.setup-steps > li {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
    min-height: 3.5rem; padding: var(--space-8) 0;
}
.setup-steps > li + li { border-top: 1px solid var(--border-subtle); }
.setup-steps .setup-name { display: inline-flex; align-items: center; gap: var(--space-8); font-weight: 600; }
/* A step done, or waiting on the one before it, recedes; the next one is drawn as it is. */
.setup-steps > li:is(.setup-done, .setup-waiting) .setup-name { color: var(--text-muted); font-weight: 400; }