/* ═══════════════════════════════════════════════════════════════
   RAVEN AI FUSION — Provenance Panel styles
   frontend/css/provenance_panel.css  ?v=20260611p2

   E2 (UX overhaul) — collapsible provenance & custody section shown
   in the asset detail panel (#right-panel-body) and the entity detail
   pane (#em-detail-pane). All colours from tokens.css; font floor
   --rv-fs-xs (0.78rem). Animations restricted to opacity/transform.
   ═══════════════════════════════════════════════════════════════ */

.prov-holder {
  margin-top: var(--rv-space-3, 0.75rem);
}

.prov-section {
  border: 1px solid var(--rv-color-border, rgba(255, 255, 255, 0.06));
  border-radius: var(--rv-r-md, 6px);
  background: var(--rv-color-bg-card, #131826);
  overflow: hidden;
}

.prov-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-space-2, 0.5rem);
  padding: var(--rv-space-2, 0.5rem) var(--rv-space-3, 0.75rem);
  cursor: pointer;
  list-style: none;
  font-size: var(--rv-fs-sm, 0.857rem);
  color: var(--rv-color-text-primary, #d8e4f0);
  user-select: none;
  transition: background var(--rv-dur-fast, 150ms) ease;
}
.prov-summary::-webkit-details-marker { display: none; }
.prov-summary:hover { background: var(--rv-color-bg-card-hover, #181e2e); }
.prov-summary:focus-visible {
  outline: 2px solid var(--rv-color-accent, #00e5ff);
  outline-offset: -2px;
}

.prov-summary-label {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.prov-summary-meta {
  font-size: var(--rv-fs-xs, 0.78rem);
  color: var(--rv-color-text-muted, #4e6070);
  white-space: nowrap;
}

/* Chevron affordance via the summary marker. */
.prov-section[open] .prov-summary-label::before { content: "▾ "; }
.prov-section:not([open]) .prov-summary-label::before { content: "▸ "; }

.prov-body {
  padding: var(--rv-space-2, 0.5rem) var(--rv-space-3, 0.75rem) var(--rv-space-3, 0.75rem);
  border-top: 1px solid var(--rv-color-border, rgba(255, 255, 255, 0.06));
  /* Subtle reveal on open — opacity only (GPU-friendly). */
  animation: prov-fade-in var(--rv-dur-normal, 220ms) ease both;
}

@keyframes prov-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.prov-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-space-1, 0.25rem);
  margin-bottom: var(--rv-space-2, 0.5rem);
}

.prov-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--rv-fs-xs, 0.78rem);
  padding: 1px var(--rv-space-2, 0.5rem);
  border-radius: var(--rv-r-full, 9999px);
  border: 1px solid var(--rv-color-border-bright, rgba(255, 255, 255, 0.12));
  color: var(--rv-color-text-secondary, #8fa3bc);
  white-space: nowrap;
}
.prov-badge-ok {
  color: var(--rv-color-sev-low, #00e676);
  border-color: var(--rv-color-sev-low, #00e676);
  background: var(--rv-color-sev-low-bg, rgba(0, 230, 118, 0.12));
}
.prov-badge-bad {
  color: var(--rv-color-sev-critical, #ff1744);
  border-color: var(--rv-color-sev-critical, #ff1744);
  background: var(--rv-color-sev-critical-bg, rgba(255, 23, 68, 0.14));
}
.prov-badge-warn {
  color: var(--rv-color-sev-medium, #ffab40);
  border-color: var(--rv-color-sev-medium, #ffab40);
  background: var(--rv-color-sev-medium-bg, rgba(255, 171, 64, 0.12));
}

.prov-subhead {
  font-size: var(--rv-fs-xs, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rv-color-text-muted, #4e6070);
  margin: var(--rv-space-2, 0.5rem) 0 var(--rv-space-1, 0.25rem);
}

.prov-refs,
.prov-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--rv-space-1, 0.25rem);
}

.prov-ref-row,
.prov-tl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rv-space-2, 0.5rem);
  font-size: var(--rv-fs-xs, 0.78rem);
  color: var(--rv-color-text-secondary, #8fa3bc);
  padding: var(--rv-space-1, 0.25rem) var(--rv-space-2, 0.5rem);
  background: var(--rv-color-bg-secondary, #0c101a);
  border-radius: var(--rv-r-base, 4px);
}

.prov-src-badge {
  font-size: var(--rv-fs-xs, 0.78rem);
  font-weight: 600;
  color: var(--rv-color-accent, #00e5ff);
  background: var(--rv-color-accent-glow, rgba(0, 229, 255, 0.18));
  border: 1px solid var(--rv-color-accent-border, rgba(0, 229, 255, 0.35));
  border-radius: var(--rv-r-sm, 2px);
  padding: 0 var(--rv-space-1, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.prov-ref-id {
  color: var(--rv-color-text-muted, #4e6070);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.prov-ref-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rv-color-text-primary, #d8e4f0);
}

.prov-conf {
  font-size: var(--rv-fs-xs, 0.78rem);
  color: var(--rv-color-accent, #00e5ff);
  font-weight: 600;
}

.prov-ref-when,
.prov-tl-when {
  font-size: var(--rv-fs-xs, 0.78rem);
  color: var(--rv-color-text-muted, #4e6070);
  white-space: nowrap;
}

.prov-action {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rv-color-text-secondary, #8fa3bc);
}
.prov-action-collected { color: var(--rv-color-accent, #00e5ff); }
.prov-action-accessed  { color: var(--rv-color-text-muted, #4e6070); }
.prov-action-modified  { color: var(--rv-color-sev-medium, #ffab40); }

.prov-actor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rv-color-text-primary, #d8e4f0);
}

.prov-tl-broken {
  border-left: 2px solid var(--rv-color-sev-critical, #ff1744);
}

.prov-empty,
.prov-muted {
  font-size: var(--rv-fs-xs, 0.78rem);
  color: var(--rv-color-text-muted, #4e6070);
  font-style: italic;
  padding: var(--rv-space-1, 0.25rem) 0;
}