/* System health, SA (admin redesign decisions 152–158; Ledger 2 phase 6,
   decisions 303, 340, 341, 344; superadmin/_system_health_content.html).
   Problems first: Needs a look (each problem part with its 24-hour bar),
   then paired cards (event-dash.css .lg-pair), then the working groups as
   tiles in an auto-fill grid (no masonry, no holes) that open their checks
   in a sheet. Status is never colour alone: dot + word, a bar + its sentence.
   Role tokens only. */

.lg-sh__status { display: flex; flex-direction: column; gap: var(--space-6); }
.lg-sh__section { margin: 0 0 var(--space-3); font-size: var(--size-section); line-height: var(--leading-section); font-weight: 600; letter-spacing: -0.01em; }

/* One part (a check): name, group, word when not fine, reason, bar. */
.lg-shp__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.lg-shp { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-top: 1px solid var(--border); }
.lg-shp:first-child { border-top: 0; padding-top: var(--space-2); }
.lg-shp:last-child { padding-bottom: 0; }
.lg-shp__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.lg-shp__name { font-weight: 600; }
.lg-shp__group { color: var(--text-muted); font-size: var(--size-label); }
.lg-shp__line { margin: 0; color: var(--text-muted); font-size: var(--size-label); line-height: var(--leading-label); }
.lg-sh__needs .lg-card__title { display: flex; align-items: center; gap: var(--space-2); }

/* Working groups: tiles that wrap and grow to fill each row (a last row
   with fewer tiles widens them: no hole at the end, decision 344); every
   tile in a row the same height; the whole tile is the button (44px+). */
.lg-sh__tiles { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.lg-sh__tiles > li { display: flex; flex: 1 1 13rem; min-width: 0; }
.lg-sh__tile {
  display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; touch-action: manipulation;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .lg-sh__tile:hover { border-color: var(--border-control); background: var(--row-hover); } }
.lg-sh__tile:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.lg-sh__tile--warning { border-color: var(--warning); }
.lg-sh__tile--danger { border-color: var(--danger); }
.lg-sh__tile-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lg-sh__tile-name { flex: 1; min-width: 0; font-weight: 600; }
.lg-sh__tile-count { flex: none; color: var(--text-muted); font-size: var(--size-label); font-variant-numeric: tabular-nums; }
.lg-sh__tile-line { color: var(--text-muted); font-size: var(--size-caption); line-height: var(--leading-caption); overflow-wrap: anywhere; }
.lg-sh__dot { flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--success); }
.lg-sh__dot--warning { background: var(--warning); }
.lg-sh__dot--danger { background: var(--danger); }
.lg-sh__sheet { inline-size: min(36rem, calc(100vw - 2rem)); }
.lg-sh__sheet .lg-shp__list { padding: 0 var(--space-4) var(--space-4); max-block-size: 70dvh; overflow: auto; }

/* 24-hour status bar (decision 341): 24 cells, status colours, a sentence beside. */
.lg-sbar { display: grid; gap: var(--space-1); max-inline-size: 40rem; }
.lg-sbar__plot { border-radius: var(--radius-pill); }
.lg-sbar__plot:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 3px; }
.lg-sbar__svg { display: block; inline-size: 100%; block-size: 1.5rem; overflow: visible; }
.lg-sbar__cell--success { fill: var(--success); }
.lg-sbar__cell--warning { fill: var(--warning); }
.lg-sbar__cell--danger { fill: var(--danger); }
.lg-sbar__cell--none { fill: var(--neutral-tint); }
.lg-sbar__cell.is-active { stroke: var(--text); stroke-width: 1.5; }
.lg-sbar__axis { display: flex; justify-content: space-between; color: var(--text-muted); font-size: var(--size-caption); }
.lg-sbar__sum { margin: 0; font-size: var(--size-label); }
.lg-key--st-success { background: var(--success); }
.lg-key--st-warning { background: var(--warning); }
.lg-key--st-danger { background: var(--danger); }
.lg-key--st-none { background: var(--neutral-tint); }

/* "Last 24 hours": stat rows spread over the card's height (it fills the
   row the chart sets, decision 344). */
.lg-stats { display: grid; grid-auto-rows: 1fr; flex: 1; margin: 0; }
.lg-stats__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: var(--space-1) var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--border); }
.lg-stats__row:first-child { border-top: 0; }
.lg-stats__row dt { color: var(--text-muted); font-size: var(--size-label); }
.lg-stats__row dd { margin: 0; font-weight: 600; text-align: end; }
.lg-stats__meter { grid-column: 1 / -1; }
.lg-stats__meter .lg-meter__head { display: none; }   /* the row above already says it */
.lg-stats__more > summary { margin-top: var(--space-2); }

/* Latest errors: the REF code + Copy on one line. */
.lg-sh__ref { display: inline-flex; align-items: center; gap: var(--space-2); }