/* What this dashboard draws that the kit does not, shared by every screen. Per-area styles live in the
   area's own file (selling, inbox, companies, company-tools, commerce, nearby, programme.css).
   Tokens only (castomo-dashkit rule 4: no colour literal outside 00-tokens.css), logical properties only,
   so dir="rtl" mirrors by itself. */

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.num { text-align: end; font-variant-numeric: tabular-nums; }
td.num[data-tone="bad"] { color: var(--bad, inherit); }
td.num[data-tone="ok"] { color: var(--ok, inherit); }

.table-wrap { overflow-x: auto; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-end: .75rem; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.list > li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.list-main { display: grid; gap: .1rem; min-inline-size: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

/* A screen is a run of blocks (stat grid, cards, tables) appended straight into #view, which the kit
   leaves as plain block flow, so they touched. One rule gives every screen the kit's own gap between
   its blocks; the page head keeps its larger bottom margin because margins collapse to the bigger one. */
#view > * + * { margin-block-start: var(--gap); }