/* System info (ADR-0211). Staff open it to ask two things: "am I on the latest release?" and "something is off, how do
   I fix it?". So the window's main view is the release and one status, then (only when something is wrong) one row and
   its one fix, then the release's notes, then a row into Diagnostics. Diagnostics and Earlier releases are views of the
   SAME window: one fixed width, one column, the body's height easing to the new content (core/system-info-window.js).
   Components USED, not redeclared: .state-chip, .btn, .status-dot, .help-tip and the tooltip layer, the modal
   factory's markup, and the release-notes list and entry (00-shell-layout-members.css). Tokens only; no one-sided accent
   borders, no pills, no gradients; exceptions only (ADR-0070): a chip is amber or red, never green. */

/* The window keeps one width in every view; the body is the one thing whose height changes. It sizes to its content
   (not the base `flex: 1`) so an explicit height can ease between views, and scrolls only when the viewport is too
   short for the content. */
.modal.sys-info-modal .modal-body {
  flex: 0 1 auto;
  min-height: 0;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  transition: height 160ms ease;
}
/* While a view swaps, the held top (ADR-0232) moves to where it centres the new view over the same time, so the box
   grows or shrinks about its middle. Only then: opening and a held modal's own placing never ease. */
.modal-overlay.swaps-view > .modal.sys-info-modal { transition: margin-top 160ms ease; }
@media (prefers-reduced-motion: reduce) {
  .modal.sys-info-modal .modal-body { transition: none; }
}

/* Back, in the header, in front of the title of a view that is not the main one. */
.sys-info-modal .modal-header .sys-back { margin-right: var(--space-2); padding-left: var(--space-2); }
.sys-info-modal .modal-header .sys-back[hidden] { display: none; }
.sys-info-modal .modal-header .modal-title { margin-right: auto; }

.sys-win { display: flex; flex-direction: column; gap: var(--space-2); }

/* The top line: the release and the one status. */
.sys-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; }
.sys-release { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text); }

/* This release's notes, always shown: the release-notes list (00-shell-layout-members.css). The window's column gap
   already spaces it, so it drops the list's own top margin. */
.sys-notes > .release-notes-list { margin-top: 0; }

/* What needs attention: the chip, one plain sentence, and (only when the live window offers one) the fix. */
.sys-attn { display: flex; align-items: center; gap: var(--space-3); padding: 7px var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-subtle); font-size: var(--text-base); color: var(--color-text); }
.sys-attn.is-warn { background: var(--color-warning-tint); }
.sys-attn.is-error { background: var(--color-danger-tint); }
.sys-attn .state-chip { flex: none; }
.sys-attn-text { flex: 1 1 auto; min-width: 0; }
.sys-attn .btn { flex: none; }

/* A list of one-line rows: the label left, what it says right, a hairline between. */
.sys-list { display: flex; flex-direction: column; }
.sys-list > * + * { border-top: 1px solid var(--color-border-subtle); }
.sys-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; padding: 3px 0; }
.sys-rest { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 var(--space-2); min-width: 0; text-align: right; }
.sys-k { display: inline-flex; align-items: center; flex: none; font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text); white-space: nowrap; }
.sys-v { font-size: var(--text-base); color: var(--color-text-secondary); }
.sys-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.sys-count { font-size: var(--text-base); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; color: var(--color-text); }
.sys-row .help-tip { margin-left: 2px; }

/* A row that opens another view. */
.sys-nav { width: 100%; background: none; border: 0; border-top: 1px solid var(--color-border-subtle); cursor: pointer; font: inherit; text-align: left; border-radius: 0; }
.sys-list > .sys-nav:first-child { border-top: 0; }
.sys-nav .bi { color: var(--color-text-muted); }
.sys-nav:hover .sys-k, .sys-nav:hover .bi, .sys-nav:focus-visible .sys-k, .sys-nav:focus-visible .bi { color: var(--color-accent); }
.sys-nav:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent); }

/* Earlier releases: one column of entries, a step quieter than the running release. */
.sys-earlier .release-notes-release { font-size: var(--text-xs); color: var(--color-text-secondary); }
.sys-earlier .release-notes-list { margin-top: 2px; font-size: var(--text-sm); line-height: 1.4; }