/* Magogi operator-instrument layer
 * ============================================================================
 * The control-surface components for MGF's operator tools (federation control,
 * the testing/CI authority, …): state chips, live indicators, progress, tabs,
 * the dark streaming console, authority markers, ribbons, the telemetry
 * live-pane, the per-test config panel, level badges, reference pills, detail /
 * evidence blocks, honest-absence empty states, workflow-state chips
 * (.tstate), actor-origin badges (.origin-badge) and the derived tag —
 * the last three lifted from the fed-web/test-web app layers in M1 P4.1.
 *
 * Distilled from the mgf-fed-web + Proofwarden wireframes onto the SAME brand
 * tokens as the rest of the kit (tokens.css), so every operator surface reads
 * identical and inherits dark mode + reduced-motion for free. ADDITIVE: this
 * file introduces only new classes; it never touches the base / component layer.
 * Depends on tokens.css; load AFTER components.css.
 *
 * Colour policy (D-BRAND-ACCENT, locked):
 *   GOLD   (--color-accent)   — the ONE affirmative action per view (use the
 *                               kit's .button-accent; instruments never re-defs
 *                               a primary button and blue is NEVER a CTA).
 *   BLUE   (--state-busy)     — functional "busy / running" only.
 *   VIOLET (--state-derived)  — functional "derived / authority / telemetry".
 *   success / warning / error / info tokens carry the rest of the state language.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. State chips — colour + DOT + label (never colour alone), monospace.
 *    Covers the SYNC state language (IN_SYNC, STALE, TAMPERED, UNKNOWN,
 *    UNREADABLE, CHECKING, SYNCING, ERROR) and the TEST state language
 *    (pass, fail, error, skipped, running). Map a state to a modifier with
 *    `state.toLowerCase().replaceAll('_','-')` → e.g. IN_SYNC → --in-sync.
 * ------------------------------------------------------------------------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 0.28rem var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  background: var(--color-bg-soft);
  white-space: nowrap;
}

.status-chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex: none;
}

/* success — IN_SYNC + pass (teal) */
.status-chip--in-sync,
.status-chip--pass {
  color: var(--color-success-text);
  background: var(--color-success-tint);
  border-color: color-mix(in srgb, var(--mgf-teal) 45%, transparent);
}
.status-chip--in-sync .status-chip__dot,
.status-chip--pass .status-chip__dot {
  background: var(--mgf-teal);
}

/* warning — STALE (amber) */
.status-chip--stale {
  color: var(--color-warning-text);
  background: var(--color-warning-tint);
  border-color: color-mix(in srgb, var(--mgf-warning) 45%, transparent);
}
.status-chip--stale .status-chip__dot {
  background: var(--mgf-warning);
}

/* error — TAMPERED, ERROR, fail, error (red) */
.status-chip--tampered,
.status-chip--error,
.status-chip--fail {
  color: var(--color-error-text);
  background: var(--color-error-tint);
  border-color: color-mix(in srgb, var(--mgf-error) 45%, transparent);
}
.status-chip--tampered .status-chip__dot,
.status-chip--error .status-chip__dot,
.status-chip--fail .status-chip__dot {
  background: var(--mgf-error);
}

/* neutral — UNKNOWN, UNREADABLE, skipped (slate) */
.status-chip--unknown,
.status-chip--unreadable,
.status-chip--skipped {
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-color: var(--color-border-strong);
}
.status-chip--unknown .status-chip__dot,
.status-chip--unreadable .status-chip__dot,
.status-chip--skipped .status-chip__dot {
  background: var(--color-text-muted);
}

/* busy — CHECKING, SYNCING, running (blue); the dot pulses */
.status-chip--checking,
.status-chip--syncing,
.status-chip--running {
  color: var(--state-busy-text);
  background: var(--state-busy-tint);
  border-color: color-mix(in srgb, var(--state-busy) 45%, transparent);
}
.status-chip--checking .status-chip__dot,
.status-chip--syncing .status-chip__dot,
.status-chip--running .status-chip__dot {
  background: var(--state-busy);
  animation: mgf-pulse 1s ease-in-out infinite;
}

/* Optional icon slot (0.4.0) — a sprite icon can accompany the dot/label:
 * `<svg class="mgf-icon" …><use href="…icons-sprite.svg#mgf-icon-…"/></svg>`
 * (the kit's `icon()` Jinja macro emits exactly that). It inherits the chip's
 * state colour via currentColor; the dot stays — colour is never the only
 * signal, and the icon is decoration on top of dot + label. */
.status-chip > .mgf-icon {
  width: 0.85rem;
  height: 0.85rem;
}

/* A spinner can replace the dot for in-flight chips (CHECKING / SYNCING). */
.spinner {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--state-busy);
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  animation: mgf-spin 0.7s linear infinite;
}

/* ----------------------------------------------------------------------------
 * 2. Live indicator dots — a bare status dot for nav rows / chrome, with a
 *    pulsing ring while running.
 * ------------------------------------------------------------------------- */
.status-indicator {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-text-muted); /* idle */
  flex: none;
}
.status-indicator--running {
  background: var(--state-busy);
  animation: mgf-ping-busy 1.4s ease-out infinite;
}
.status-indicator--queued {
  background: var(--mgf-warning);
}
.status-indicator--down {
  background: var(--mgf-error);
}
/* 0.4.0 — the full state language as bare dots (console rails, legends, the
 * topbar pill), mirroring the .status-chip families: SYNC states + idle.
 * Static (no pulse) except --running above; map with the same
 * `state.toLowerCase().replaceAll('_','-')` rule. */
.status-indicator--idle,
.status-indicator--in-sync {
  background: var(--mgf-teal);
}
.status-indicator--stale {
  background: var(--mgf-warning);
}
.status-indicator--tampered,
.status-indicator--error {
  background: var(--mgf-error);
}
.status-indicator--unknown,
.status-indicator--unreadable {
  background: var(--color-text-muted);
}
.status-indicator--checking,
.status-indicator--syncing {
  background: var(--state-busy);
}

/* ----------------------------------------------------------------------------
 * 3. Progress bars — determinate fill (busy → teal), a `--done` solid-teal
 *    variant, and an optional indeterminate scanning track.
 * ------------------------------------------------------------------------- */
.progress {
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--state-busy), var(--mgf-teal));
  transition: width var(--motion-normal) var(--ease-standard);
}
.progress__fill--done {
  background: var(--mgf-teal);
}
/* Indeterminate: a scanning sweep when there is no percentage to show. */
.progress--indeterminate .progress__fill {
  width: 35% !important;
  background: linear-gradient(
    90deg,
    transparent,
    var(--state-busy),
    transparent
  );
  animation: mgf-scan 1.2s ease-in-out infinite;
}

/* ----------------------------------------------------------------------------
 * 4. Tabs (underline-active) + lens-tabs (pill switcher). The active marker is
 *    the ONE gold signal (matching .app-nav__link[aria-current] in
 *    components.css) — text stays dark for contrast; gold is the indicator only.
 * ------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}
.tab {
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--motion-fast) var(--ease-standard);
}
.tab:hover {
  color: var(--color-text);
}
.tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.lens-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.lens-tab {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.lens-tab:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.lens-tab--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ----------------------------------------------------------------------------
 * 5. Dark streaming console — light text on dark ink, one row per NDJSON event.
 *    Per-event-kind colour comes from the shared .kind--* hue classes (§ below)
 *    applied to .console__kind; the dark surface derives its own fg/bg from the
 *    kind's --kind-base. The console stays ink in both themes (it is a terminal).
 * ------------------------------------------------------------------------- */
.console {
  background: var(--mgf-ink);
  color: var(--mgf-mist);
  border: 1px solid color-mix(in srgb, white 10%, var(--mgf-ink));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 18rem;
  overflow-y: auto;
}
.console__line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.console__seq {
  color: color-mix(in srgb, var(--mgf-mist) 38%, transparent);
  min-width: 1.6rem;
}
.console__ts {
  color: color-mix(in srgb, var(--mgf-mist) 55%, transparent);
  min-width: 4rem;
}
.console__kind {
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  min-width: 6rem;
  text-align: center;
  color: color-mix(in srgb, var(--kind-base, var(--mgf-slate)) 60%, white);
  background: color-mix(in srgb, var(--kind-base, var(--mgf-slate)) 26%, var(--mgf-ink));
}
.console__text {
  flex: 1;
  color: var(--mgf-mist);
}
.console__text b {
  color: color-mix(in srgb, var(--mgf-teal) 62%, white);
  font-weight: 600;
}

/* Shared event-kind hues — each kind declares its family via three existing
 * tokens (base for the dark console, tint/-text for light pills). Used on
 * .console__kind (dark) and .live-pane__kind (light) alike. */
.kind--session-start {
  --kind-base: var(--state-derived);
  --kind-tint: var(--state-derived-tint);
  --kind-text: var(--state-derived-text);
}
.kind--session-end,
.kind--lease-acquired,
.kind--assert,
.kind--gate,
.kind--test-end {
  --kind-base: var(--mgf-teal);
  --kind-tint: var(--color-success-tint);
  --kind-text: var(--color-success-text);
}
.kind--test-start,
.kind--step,
.kind--progress {
  --kind-base: var(--state-busy);
  --kind-tint: var(--state-busy-tint);
  --kind-text: var(--state-busy-text);
}
.kind--run-request,
.kind--log,
.kind--lease-released {
  --kind-base: var(--mgf-slate);
  --kind-tint: var(--color-bg-soft);
  --kind-text: var(--color-text-muted);
}
.kind--artifact,
.kind--queued,
.kind--coalesced {
  --kind-base: var(--mgf-warning);
  --kind-tint: var(--color-warning-tint);
  --kind-text: var(--color-warning-text);
}
.kind--error,
.kind--cancelled,
.kind--lease-reclaimed {
  --kind-base: var(--mgf-error);
  --kind-tint: var(--color-error-tint);
  --kind-text: var(--color-error-text);
}

/* ----------------------------------------------------------------------------
 * 6. Authority / broker markers — violet dashed "authority" tag + an up/down
 *    service-status pill (colour + dot + label).
 * ------------------------------------------------------------------------- */
.authority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--state-derived-text);
  background: var(--state-derived-tint);
  border: 1px dashed var(--state-derived);
  border-radius: var(--radius-sm);
  padding: 0.18rem var(--space-2);
  white-space: nowrap;
}

.service-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  white-space: nowrap;
}
.service-status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex: none;
}
.service-status--up {
  color: var(--color-success-text);
  background: var(--color-success-tint);
  border-color: color-mix(in srgb, var(--mgf-teal) 45%, transparent);
}
.service-status--up::before {
  background: var(--mgf-teal);
}
.service-status--down {
  color: var(--color-error-text);
  background: var(--color-error-tint);
  border-color: color-mix(in srgb, var(--mgf-error) 45%, transparent);
}
.service-status--down::before {
  background: var(--mgf-error);
}

/* ----------------------------------------------------------------------------
 * 7. Ribbons — full-width alert bars.
 * ------------------------------------------------------------------------- */
.ribbon {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.85rem;
}
.ribbon b {
  font-family: var(--font-mono);
  font-weight: 600;
}
.ribbon--warning {
  color: var(--color-warning-text);
  background: var(--color-warning-tint);
  border-color: color-mix(in srgb, var(--mgf-warning) 40%, transparent);
}
.ribbon--danger {
  color: var(--color-error-text);
  background: var(--color-error-tint);
  border-color: color-mix(in srgb, var(--mgf-error) 40%, transparent);
}
.ribbon--info {
  color: var(--color-info-text);
  background: var(--color-info-tint);
  border-color: color-mix(in srgb, var(--mgf-info) 40%, transparent);
}

/* ----------------------------------------------------------------------------
 * 8. Live-pane — the telemetry / run-session card (violet-tinted): header,
 *    body, current step, meta, latest line, timeline + light event rows.
 *    Telemetry is ephemeral, NOT provenance — the violet wash signals "derived".
 * ------------------------------------------------------------------------- */
.live-pane {
  border: 1px solid color-mix(in srgb, var(--state-derived) 32%, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  overflow: hidden;
}
.live-pane__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--state-derived) 18%, var(--color-border));
  background: var(--state-derived-tint);
}
.live-pane__op {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--state-derived-text);
}
.live-pane__body {
  padding: var(--space-4);
}
.live-pane__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}
.live-pane__meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.live-pane__latest {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text);
  background: color-mix(in srgb, var(--state-derived) 10%, var(--color-bg));
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
.live-pane__timeline {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--state-derived) 16%, var(--color-border));
}
.live-pane__timeline-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.live-pane__events {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 13rem;
  overflow-y: auto;
  padding-right: var(--space-1);
}
.live-pane__event {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--state-derived) 14%, var(--color-border));
}
.live-pane__seq {
  color: color-mix(in srgb, var(--state-derived) 55%, var(--color-text-muted));
  min-width: 1.6rem;
}
.live-pane__ts {
  color: var(--color-text-muted);
  min-width: 4rem;
}
/* Light kind pill — derives fg/bg from the shared .kind--* tint/-text tokens. */
.live-pane__kind {
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  min-width: 5rem;
  text-align: center;
  color: var(--kind-text, var(--color-text-muted));
  background: var(--kind-tint, var(--color-bg-soft));
}
.live-pane__text {
  flex: 1;
  color: var(--color-text);
}
.live-pane__text b {
  color: var(--state-derived-text);
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * 9. Config-panel — the collapsible per-test config form (violet header). Pair
 *    with the .config-toggle pill to open/close it.
 * ------------------------------------------------------------------------- */
.config-toggle {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--state-derived-text);
  background: var(--state-derived-tint);
  border: 1px solid color-mix(in srgb, var(--state-derived) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.config-toggle:hover {
  background: color-mix(in srgb, var(--state-derived) 24%, var(--color-bg));
}

.config-panel {
  border: 1px solid color-mix(in srgb, var(--state-derived) 30%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--state-derived) 6%, var(--color-bg));
  padding: var(--space-3) var(--space-4);
}
.config-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--state-derived-text);
  margin-bottom: var(--space-3);
}
.config-panel__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
}
.config-panel__row > label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
}
.config-panel__row > label span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.config-panel__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--state-derived) 16%, var(--color-border));
}
.config-panel__note {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------------------
 * 10. Level badges — risk / effort severity (low / medium / high), plus a busy
 *     `--effort` variant and a neutral one.
 * ------------------------------------------------------------------------- */
.level-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.2rem var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  white-space: nowrap;
}
.level-badge--low {
  color: var(--color-success-text);
  background: var(--color-success-tint);
}
.level-badge--medium {
  color: var(--color-warning-text);
  background: var(--color-warning-tint);
}
.level-badge--high {
  color: var(--color-error-text);
  background: var(--color-error-tint);
}
.level-badge--effort {
  color: var(--state-busy-text);
  background: var(--state-busy-tint);
}

/* ----------------------------------------------------------------------------
 * 11. Telemetry marker — the "live · ephemeral, not provenance" tag, plus the
 *     live dot (red pulse while streaming, teal when ended) and a live chip.
 * ------------------------------------------------------------------------- */
.telemetry-marker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--state-derived-text);
  background: var(--state-derived-tint);
  border: 1px dashed var(--state-derived);
  border-radius: var(--radius-sm);
  padding: 0.18rem var(--space-2);
  white-space: nowrap;
}

.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mgf-error);
  flex: none;
  animation: mgf-ping-live 1.4s ease-out infinite;
}
.live-dot--ended {
  background: var(--mgf-teal);
  animation: none;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-error-text);
  background: var(--color-error-tint);
  border: 1px solid color-mix(in srgb, var(--mgf-error) 35%, transparent);
  white-space: nowrap;
}
.live-chip--ended {
  color: var(--color-success-text);
  background: var(--color-success-tint);
  border-color: color-mix(in srgb, var(--mgf-teal) 35%, transparent);
}

/* ----------------------------------------------------------------------------
 * 12. Reference pills — a neutral mono pill (ids / refs) with --age (amber) and
 *     --priority (red) variants.
 * ------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.22rem var(--space-2);
  white-space: nowrap;
}
.pill--age {
  color: var(--color-warning-text);
  background: var(--color-warning-tint);
  border-color: transparent;
  font-weight: 600;
}
.pill--priority {
  color: var(--color-error-text);
  background: var(--color-error-tint);
  border-color: transparent;
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * 13. Detail / evidence blocks — the expandable mono detail block, a titled
 *     detail-block container, and the inline evidence line.
 * ------------------------------------------------------------------------- */
.detail {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--color-text);
}
.detail__key {
  color: var(--color-text-muted);
}

.detail-block {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  padding: var(--space-3) var(--space-4);
}
.detail-block__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
/* Tint a detail-block by meaning (e.g. a "why blocked" reason → warning). */
.detail-block--warning {
  border-left-color: var(--mgf-warning);
  background: var(--color-warning-tint);
}
.detail-block--derived {
  border-left-color: var(--state-derived);
  background: var(--state-derived-tint);
}

.evidence {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------------------
 * 14. Empty-state variants — honest absence. Extends the kit's .empty (the
 *     lattice panel in components.css) with a coloured glyph + intent variants.
 *     UNKNOWN ("?") and "no data" read neutral; UNREADABLE ("!") reads warning.
 * ------------------------------------------------------------------------- */
.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
}
.empty__desc {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--color-text-muted);
}
.empty--unknown .empty__icon,
.empty--no-data .empty__icon {
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
}
.empty--unreadable .empty__icon {
  color: var(--color-warning-text);
  background: var(--color-warning-tint);
}

/* The honest-absence composition (0.4.0; backs the kit's `absence` macro) —
 * an .empty panel with breathing room, the state chip + action line, and an
 * optional error list. Lifted from fed-web's .fw-absence. */
.absence {
  padding: var(--space-12) var(--space-6);
}
.absence__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-3) 0 0;
}
.absence__errs {
  list-style: none;
  margin: var(--space-3) auto 0;
  padding: 0;
  max-width: 60ch;
  font-size: 0.66rem;
  color: var(--color-error-text);
  text-align: left;
}

/* ----------------------------------------------------------------------------
 * 15. Workflow-state chip (.tstate) — task/stage WORKFLOW language (done,
 *     in-progress, next, postponed, blocked, todo/skipped/planned), the
 *     sibling of .status-chip's SYNC/TEST language, on the same tokens:
 *     done=teal, in-progress=busy blue, next=derived violet, postponed=amber,
 *     blocked=red, neutral=slate. Lifted from mgf-fed-web (M1 P4.1). Map a
 *     state with `state.toLowerCase().replaceAll('_','-')` (the kit's
 *     `tstate()` macro does this and de-underscores the label).
 * ------------------------------------------------------------------------- */
.tstate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.22rem var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  white-space: nowrap;
}
.tstate__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.tstate--done {
  color: var(--color-success-text);
  background: var(--color-success-tint);
}
.tstate--in-progress {
  color: var(--state-busy-text);
  background: var(--state-busy-tint);
}
.tstate--next {
  color: var(--state-derived-text);
  background: var(--state-derived-tint);
}
.tstate--postponed {
  color: var(--color-warning-text);
  background: var(--color-warning-tint);
}
.tstate--blocked {
  color: var(--color-error-text);
  background: var(--color-error-tint);
}

/* ----------------------------------------------------------------------------
 * 16. Origin badge (.origin-badge) — WHO submitted/produced a run or record
 *     (web · cli · agent · ci). Mono micro-badge on the state tokens:
 *     web=busy blue, agent=derived violet, ci=amber, cli/other=slate.
 *     Lifted from mgf-test-web's .pw-origin (M1 P4.1).
 * ------------------------------------------------------------------------- */
.origin-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.45rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  white-space: nowrap;
}
.origin-badge--web {
  color: var(--state-busy-text);
  background: var(--state-busy-tint);
}
.origin-badge--agent {
  color: var(--state-derived-text);
  background: var(--state-derived-tint);
}
.origin-badge--ci {
  color: var(--color-warning-text);
  background: var(--color-warning-tint);
}

/* ----------------------------------------------------------------------------
 * 17. Derived tag (.derived-tag) — the violet dashed "this value is inferred
 *     by the web layer, never a project-reported fact" marker; the inline
 *     sibling of .authority-badge / .detail-block--derived. Lifted from
 *     mgf-fed-web (M1 P4.1); the kit's `derived_tag()` macro names the
 *     inferring surface in the title attribute.
 * ------------------------------------------------------------------------- */
.derived-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--state-derived-text);
  background: var(--state-derived-tint);
  border: 1px dashed var(--state-derived);
  border-radius: var(--radius-sm);
  padding: 0.08rem var(--space-2);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
 * Keyframes + reduced-motion. base.css already strips motion globally under
 * prefers-reduced-motion; this block degrades the instrument animations to a
 * meaningful static state (so a paused spinner / steady ring still reads),
 * matching the wireframes.
 * ------------------------------------------------------------------------- */
@keyframes mgf-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes mgf-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mgf-scan {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(360%);
  }
}
@keyframes mgf-ping-busy {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--state-busy) 50%, transparent);
  }
  70% {
    box-shadow: 0 0 0 6px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes mgf-ping-live {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mgf-error) 50%, transparent);
  }
  70% {
    box-shadow: 0 0 0 6px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-chip__dot,
  .status-indicator--running,
  .live-dot,
  .progress--indeterminate .progress__fill {
    animation: none;
  }
  /* Keep the spinner legible as a static ring instead of a vanished arc. */
  .spinner {
    animation: none;
    border-top-color: var(--state-busy);
  }
}
