/*
 * Home — page-only layout tweaks. Everything visual comes from the
 * component contract (.page, .stat-grid, .card, .kv, .meter, .table,
 * .badge, .empty, .more); this file only owns the two arrangements no
 * component covers yet, plus two spacing fixes around a bleeding table:
 *   .resources      — the System resources stack of meter-row + <meter>
 *   .alert__list    — the bullet list inside the health banner's message
 *   .hbar / .more   — gaps around a .table-wrap that bleeds to the card edge
 */

/* System resources: one labelled meter per row. */
.resources {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.resources__item { min-width: 0; }
.resources .meter-row > span:first-child { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* Health banner: reasons as a compact bullet list under the title. */
.alert__list {
    margin: var(--sp-1) 0 0;
    padding-left: 1.2em;
    color: var(--color-text-muted);
}
.alert__list li + li { margin-top: var(--sp-half); }

/* A .table-wrap that is a direct child of .card__body bleeds to the card
   edges (negative margins). Restore the gap to the share bar above it
   and to the "Show more" <details> that follows it. */
.card__body > .hbar + .table-wrap { margin-top: 0; }
.card__body > .table-wrap + .more { margin-top: var(--sp-4); }