/* ============================================
   Research Engine — Data Pipeline UI
   Trust-building components showing how
   data is sourced, refreshed and verified
   ============================================ */

/* ── Research State Badge ── */
.research-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.research-state__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.research-state--monitored {
  background: rgba(4, 120, 87, 0.05);
  color: var(--color-positive);
}
.research-state--monitored .research-state__dot { background: var(--color-positive); }
.research-state--reviewed {
  background: rgba(29, 78, 216, 0.05);
  color: var(--color-info);
}
.research-state--reviewed .research-state__dot { background: var(--color-info); }
.research-state--preliminary {
  background: rgba(180, 83, 9, 0.05);
  color: var(--color-warning);
}
.research-state--preliminary .research-state__dot { background: var(--color-warning); }
.research-state--refresh {
  background: rgba(180, 83, 9, 0.05);
  color: var(--color-warning);
}
.research-state--refresh .research-state__dot { background: var(--color-warning); }
.research-state--unresearched {
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.research-state--unresearched .research-state__dot { background: var(--color-text-subtle); }
.research-state--recent {
  background: rgba(4, 120, 87, 0.05);
  color: var(--color-positive);
}
.research-state--recent .research-state__dot { background: var(--color-positive); }

/* ── Freshness Badge (inline) ── */
.freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.freshness-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.freshness-badge--fresh .freshness-badge__dot { background: var(--color-positive); }
.freshness-badge--fresh { color: var(--color-positive); }
.freshness-badge--aging .freshness-badge__dot { background: var(--color-warning); }
.freshness-badge--aging { color: var(--color-warning); }
.freshness-badge--stale .freshness-badge__dot { background: var(--color-text-subtle); }
.freshness-badge--stale { color: var(--color-text-subtle); }

/* ── Data Source Panel ── */
.source-panel {
  padding: 1.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.source-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.source-panel__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.source-panel__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  background: var(--color-bg);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}
.source-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}
.source-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
}
.source-item__left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.source-item__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.source-item__dot--available { background: var(--color-positive); }
.source-item__dot--missing { background: var(--color-text-subtle); }
.source-item__dot--stale { background: var(--color-warning); }
.source-item__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-item__meta {
  font-size: 0.62rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* ── Missing Evidence Warning ── */
.evidence-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(180, 83, 9, 0.03);
  border: 1px solid rgba(180, 83, 9, 0.1);
  border-radius: var(--radius-lg);
}
.evidence-warning__icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.1rem;
}
.evidence-warning__icon svg {
  width: 16px; height: 16px;
  stroke: var(--color-warning); stroke-width: 2.5; fill: none;
}
.evidence-warning__content { flex: 1; }
.evidence-warning__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.2rem;
}
.evidence-warning__text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── Next Review Indicator ── */
.next-review {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}
.next-review__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.next-review__icon svg {
  width: 14px; height: 14px;
  stroke: var(--color-text-muted); stroke-width: 2; fill: none;
}
.next-review__content { flex: 1; }
.next-review__label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-subtle);
}
.next-review__value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ── Confidence Score (detailed) ── */
.confidence-detail {
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.confidence-detail__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.confidence-detail__score {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-positive);
  letter-spacing: -0.03em;
}
.confidence-detail__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.confidence-detail__sub {
  font-size: 0.68rem;
  color: var(--color-text-subtle);
}
.confidence-detail__factors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.confidence-factor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.confidence-factor__value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  min-width: 36px;
}
.confidence-factor__label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* ── Pipeline Activity (compact timeline) ── */
.pipeline-activity {
  padding: 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.pipeline-activity__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.85rem;
}
.pipeline-activity__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pipeline-event {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}
.pipeline-event__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pipeline-event__dot--done { background: var(--color-positive); }
.pipeline-event__dot--scheduled { background: var(--color-border); }
.pipeline-event__text {
  flex: 1;
  color: var(--color-text);
  font-weight: 500;
}
.pipeline-event__date {
  font-size: 0.65rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* ── Refresh Schedule Card ── */
.refresh-schedule {
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.refresh-schedule__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 1rem;
}
.refresh-schedule__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}
.refresh-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.refresh-item__source {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text);
}
.refresh-item__schedule {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  background: var(--color-white);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--color-border-light);
}

/* ── Review Status Badge ── */
.review-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 700;
}
.review-status--editorial {
  background: rgba(29, 78, 216, 0.05);
  color: var(--color-info);
  border: 1px solid rgba(29, 78, 216, 0.1);
}
.review-status--automated {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-light);
}
.review-status--pending {
  background: rgba(180, 83, 9, 0.04);
  color: var(--color-warning);
  border: 1px solid rgba(180, 83, 9, 0.1);
}
.review-status__icon {
  width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
}
.review-status__icon svg {
  width: 10px; height: 10px;
  stroke: currentColor; stroke-width: 2.5; fill: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .source-panel { padding: 1.25rem; }
  .source-panel__grid { grid-template-columns: 1fr; }
  .confidence-detail__factors { grid-template-columns: 1fr; }
  .refresh-schedule__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .research-state__dot,
  .freshness-badge__dot { animation: none; }
}