/* Phase 4.2: the Steward panel (js/steward.js) on the agent Overview and in the New agent wizard.
   Enrol → Grant → Install → Reporting as the change stepper's sibling; the installer's output is a <pre> that grows with
   its content (Phase 4.1: no inner scroll box). Roles from design/tokens.css only; no raw colour. */

.steward { scroll-margin-top: var(--sp-6); }
.steward:focus { outline: none; }
.steward:focus-visible { box-shadow: var(--focus-ring); }
.steward-sum { display: contents; }
.steward-body { display: grid; gap: var(--sp-5); padding: 0 var(--sp-5) var(--sp-5); }
.steward-wizard { margin: var(--sp-5) 0 0; box-shadow: none; border: 1px solid var(--line); }
.steward-wizard .steward-body { padding: var(--sp-5); }
.steward-loading { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font: var(--text-body-sm); padding: var(--sp-2) 0; }

/* the four stages: the change stepper (ops.css) plus a "not for this host" state and who did it */
.steward-steps { padding-top: var(--sp-1); }
.step.is-skip .step-dot { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-3); }
.step.is-skip .step-label { color: var(--ink-3); font-weight: 500; }
.step.is-skip::before { background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.steward-steps .step.is-fail::before { background: var(--line-strong); }
.step-by { color: var(--ink-3); }

/* the current stage: one sentence, the facts it acts on, its button */
.steward-stage { display: grid; gap: var(--sp-4); max-width: 80ch; }
.steward-lede { color: var(--ink-2); }
.steward-lede b { color: var(--ink-1); font-weight: 600; }
.steward-lede > .icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--ok); stroke-width: 2.5; }
.steward-reason { display: grid; gap: var(--sp-1); }
.steward-hint { color: var(--ink-1); }
.steward-why { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--ink-2); font: var(--text-body-sm); }
.steward-why .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-3); }
.steward-write-error { margin: 0; align-items: flex-start; }
.steward-write-error > div { flex: 1 1 280px; }
.steward-next { margin-top: var(--sp-1); color: var(--ink-2); font: var(--text-body-sm); }
.steward-next b { color: var(--ink-1); font-weight: 600; }
.steward-reason .steward-next { margin-top: 0; padding-left: calc(16px + var(--sp-2)); }
.banner .steward-next { color: inherit; }
.steward-kv { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); font: var(--text-body-sm); }
.steward-kv dd.mono { font: var(--text-mono); font-size: 13px; }
.steward-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.steward-restart { margin: 0; align-items: center; }
.steward-restart > span { flex: 1 1 280px; }
.steward-link { font-weight: 500; }
.banner .steward-link { white-space: nowrap; }

/* a run, live: three stages in a row, the host's output below */
.steward-run { display: grid; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); }
.steward-run-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); }
.steward-run-head .muted { font: var(--text-body-sm); }
.run-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.run-stage { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 2px var(--sp-2); }
.run-dot { position: relative; grid-row: span 2; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-on-accent); }
.run-dot .icon { width: 13px; height: 13px; stroke-width: 2.5; }
.run-stage.is-done .run-dot { background: var(--accent-fill); box-shadow: none; }
.run-stage.is-working .run-dot { box-shadow: inset 0 0 0 2px var(--accent); }
.run-stage.is-working .run-dot::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin 1100ms linear infinite; }
.run-label { font: var(--text-body-sm); font-weight: 600; color: var(--ink-3); }
.run-stage.is-done .run-label, .run-stage.is-working .run-label { color: var(--ink-1); }
.run-time { font: var(--text-caption); color: var(--ink-3); min-height: 16px; }
.run-stage.is-working .run-time { color: var(--accent); }
.steward-tail { display: grid; gap: var(--sp-2); min-width: 0; }
.steward-tail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.steward-pre { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--line);
  font: var(--text-mono); font-size: 12.5px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.steward-pre:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.steward-tail-empty { font: var(--text-body-sm); }

/* past runs: a table with a sticky header (Phase 4.1); a row's output opens beneath it */
.steward-runs { display: grid; gap: var(--sp-2); }
.steward-runs .table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); }
.steward-cmd { font-size: 12px; font-weight: 400; }
.steward-run-out > td { background: var(--surface-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }

@media (max-width: 719px) {
  .steward-body { padding: 0 var(--sp-4) var(--sp-4); }
  .steward-wizard .steward-body { padding: var(--sp-4); }
  .steward-run { padding: var(--sp-3); margin: 0 calc(-1 * var(--sp-2)); }
  .steward-pre { padding: var(--sp-3); font-size: 12px; }
  .steward-actions .btn { flex: 1 1 auto; }
  .steward-runs-table th:nth-child(4), .steward-runs-table td:nth-child(4), .steward-runs-table th:nth-child(5), .steward-runs-table td:nth-child(5) { display: none; }
}
@media (max-width: 479px) {
  .steward-steps .step-time { font-size: 11px; }
  .step-by { display: none; }
  /* Past runs fit a phone: Output is an icon button (its label stays for screen readers), cells pad less. */
  .steward-out-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .steward-out-btn { min-width: 44px; padding-inline: var(--sp-2); }
  .steward-runs-table th, .steward-runs-table td { padding-inline: var(--sp-2); }
  .steward-cmd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .run-stage.is-working .run-dot::before { animation: none; border-right-color: var(--accent); } }
@media (forced-colors: active) { .run-dot { border: 2px solid CanvasText; } }