/* Synthetic activity view: self-contained component styles. Uses host tokens when present, neutral fallbacks otherwise. */
.av-section { margin: 0 0 18px; }
.av-root {
  --av-ink: var(--ink, #111827);
  --av-ink-2: var(--ink-2, #334155);
  --av-muted: var(--muted, #5b6676);
  --av-line: var(--line, #dde3ea);
  --av-surface: var(--surface, #ffffff);
  --av-canvas: var(--canvas, #f7f9fb);
  --av-blue: var(--brand-2, #2563eb);
  --av-blue-soft: var(--info-soft, #e8f0ff);
  --av-green: var(--green, #1f7a4d);
  --av-green-soft: var(--green-soft, #e8f6ee);
  --av-amber: var(--amber, #946400);
  --av-amber-soft: var(--amber-soft, #fff4d8);
  --av-red: var(--red, #b44444);
  --av-red-soft: var(--red-soft, #fff0f0);
  --av-mono: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--av-line);
  border-radius: 8px;
  background: var(--av-surface);
  color: var(--av-ink);
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
}
.av-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.av-title { min-width: 0; flex: 1 1 380px; }
.av-kicker, .av-k, .av-conn-kicker, .av-rel-kind { font-family: var(--av-mono); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--av-muted); }
.av-h2 { margin: 3px 0 4px; font-size: 19px; }
.av-h3 { margin: 0 0 2px; font-size: 15px; color: var(--av-ink-2); }
.av-note { margin: 0; color: var(--av-muted); max-width: 72ch; }
.av-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 11px; color: var(--av-muted); }
.av-synthetic { padding: 3px 9px; border-radius: 999px; background: var(--av-blue-soft); color: var(--av-blue); font-family: var(--av-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.av-legend { display: flex; flex-wrap: wrap; gap: 6px; }

.av-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.av-state-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.av-state-working { color: var(--av-blue); background: var(--av-blue-soft); }
.av-state-waiting { color: var(--av-amber); background: var(--av-amber-soft); }
.av-state-failed { color: var(--av-red); background: var(--av-red-soft); }
.av-state-completed { color: var(--av-green); background: var(--av-green-soft); }
.av-state-unknown { color: var(--av-muted); background: var(--av-canvas); border-color: var(--av-line); border-style: dashed; }
.av-state-unknown .av-state-dot { background: transparent; border: 1.5px solid currentColor; }

.av-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.av-tile { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px; border: 1px solid var(--av-line); border-left-width: 4px; border-radius: 8px; background: var(--av-surface); }
.av-tile-working { border-left-color: var(--av-blue); }
.av-tile-waiting { border-left-color: var(--av-amber); }
.av-tile-failed { border-left-color: var(--av-red); }
.av-tile-completed { border-left-color: var(--av-green); }
.av-tile-unknown { border-left-color: var(--av-line); border-left-style: dashed; }
.av-tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.av-tile-id { display: grid; gap: 2px; min-width: 0; }
.av-agent-name { font-size: 13px; color: var(--av-ink); overflow-wrap: anywhere; }
.av-message { margin: 0; color: var(--av-ink-2); overflow-wrap: anywhere; white-space: pre-wrap; }

.av-facts { display: grid; gap: 4px; }
.av-facts-inline { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 12px; }
.av-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; min-width: 0; }
.av-facts-inline .av-kv { grid-template-columns: 1fr; gap: 1px; }
.av-v, .av-time { color: var(--av-ink-2); overflow-wrap: anywhere; min-width: 0; }
.av-code { font-family: var(--av-mono); font-size: 11px; color: var(--av-ink-2); overflow-wrap: anywhere; }
.av-missing { color: var(--av-red); font-style: italic; }
.av-flag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--av-amber-soft); color: var(--av-amber); font-size: 10px; font-weight: 700; }
.av-evidence { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--av-canvas); color: var(--av-muted); border: 1px solid var(--av-line); }
.av-evidence-recorded { color: var(--av-green); background: var(--av-green-soft); border-color: transparent; }
.av-evidence-unverified { color: var(--av-amber); background: var(--av-amber-soft); border-color: transparent; }
.av-evidence-missing { color: var(--av-red); background: var(--av-red-soft); border-color: transparent; }

.av-conn { display: grid; gap: 3px; padding: 8px 9px; border: 1px dashed var(--av-line); border-radius: 6px; background: var(--av-canvas); }
.av-conn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.av-conn-state { font-size: 11px; font-weight: 700; color: var(--av-muted); }
.av-conn-state-stale { color: var(--av-amber); }
.av-conn-state-disconnected { color: var(--av-red); }
.av-conn-state-connected { color: var(--av-green); }
.av-conn-detail { margin: 2px 0 0; color: var(--av-muted); font-size: 12px; overflow-wrap: anywhere; }

.av-timeline { display: grid; gap: 8px; }
.av-events { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--av-line); }
.av-event { position: relative; display: grid; gap: 6px; padding: 10px 0 12px 16px; border-bottom: 1px solid var(--av-line); min-width: 0; }
.av-event::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--av-surface); border: 2px solid var(--av-muted); }
.av-event-working::before { border-color: var(--av-blue); }
.av-event-waiting::before { border-color: var(--av-amber); }
.av-event-failed::before { border-color: var(--av-red); }
.av-event-completed::before { border-color: var(--av-green); }
.av-event-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-event-top .av-time { font-family: var(--av-mono); font-size: 11px; }
.av-relations { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.av-relation { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 8px; border-radius: 6px; background: var(--av-blue-soft); }
.av-rel-text { color: var(--av-ink-2); overflow-wrap: anywhere; }
.av-problems { margin: 0; color: var(--av-red); font-size: 12px; }
.av-provenance { color: var(--av-muted); font-size: 11px; }
.av-fallback { margin: 0; padding: 12px; border: 1px dashed var(--av-line); border-radius: 8px; color: var(--av-muted); }

@media (max-width: 480px) {
  .av-root { padding: 12px; gap: 12px; }
  .av-meta { align-items: flex-start; }
  .av-tiles { grid-template-columns: 1fr; }
  .av-kv { grid-template-columns: 88px minmax(0, 1fr); }
  .av-facts-inline { grid-template-columns: 1fr 1fr; }
}

/* agent.activity/v1 contract additions: observed time, sequence, error evidence, freshness, diagnostics. */
.av-contract { max-width: 320px; text-align: right; font-family: var(--av-mono); font-size: 10px; color: var(--av-muted); overflow-wrap: anywhere; }
.av-occurred { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.av-k-inline { font-size: 10px; }
.av-muted { color: var(--av-muted); font-style: italic; }
.av-result { margin: 0; color: var(--av-ink-2); overflow-wrap: anywhere; }
.av-error { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid var(--av-red-soft); border-left: 3px solid var(--av-red); border-radius: 6px; background: var(--av-surface); }
.av-error-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.av-error-label { font-family: var(--av-mono); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--av-red); }
.av-error-message { margin: 2px 0 0; color: var(--av-ink-2); font-family: var(--av-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.av-error-note { color: var(--av-muted); font-size: 11px; }
.av-fresh { font-weight: 700; font-size: 11px; color: var(--av-muted); }
.av-fresh-stale { color: var(--av-amber); }
.av-fresh-within-policy { color: var(--av-green); }
.av-basis { color: var(--av-muted); font-size: 11px; }
.av-diagnostics { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--av-red); border-radius: 8px; background: var(--av-red-soft); }
.av-diag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.av-diag { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--av-line); border-radius: 6px; background: var(--av-surface); min-width: 0; }
.av-diag-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.av-diag-applied { padding: 1px 7px; border-radius: 999px; background: var(--av-red-soft); color: var(--av-red); font-size: 10px; font-weight: 700; }
.av-diag-problems { margin: 0; padding-left: 18px; color: var(--av-red); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .av-contract { text-align: left; }
}