/* Feature 1.4 — Peer Earnings Curve */

/* ── Container ─────────────────────────────────────────────────── */

.peer-curve {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* ── Headline ──────────────────────────────────────────────────── */

.peer-curve__headline {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--color-neutral-700, #374151);
  margin: 0;
  line-height: 1.4;
}

/* ── Chart wrapper ─────────────────────────────────────────────── */

.peer-curve__chart-wrap {
  width: 100%;
  border-radius: var(--radius-lg, 0.75rem);
  background: var(--color-surface-inset, #F9FAFB);
  border: 1px solid var(--color-neutral-200, #E5E7EB);
  overflow: hidden;
  padding: var(--space-2, 0.5rem) 0 0;
}

.peer-curve__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Low-confidence: slightly desaturated + dashed stroke treatment handled in JS via class */
.peer-curve__svg--low-conf .peer-curve__line {
  stroke-dasharray: 6 3;
  opacity: 0.75;
}

/* ── SVG element classes ───────────────────────────────────────── */

.peer-curve__fill {
  /* gradient fill set inline via defs */
}

.peer-curve__line {
  /* stroke set inline */
}

.peer-curve__gap-rect {
  /* fill set inline */
}

.peer-curve__median-line {
  /* stroke set inline */
}

.peer-curve__median-label {
  font-family: inherit;
}

.peer-curve__user-line {
  /* stroke set inline */
}

.peer-curve__user-dot {
  filter: drop-shadow(0 0 3px rgba(220, 38, 38, 0.35));
}

.peer-curve__user-label {
  font-family: inherit;
}

/* ── Badges row ────────────────────────────────────────────────── */

.peer-curve__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: center;
}

.peer-curve__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full, 9999px);
  line-height: 1.4;
}

.peer-curve__badge--ai {
  background: var(--color-ai-bg, #EEF2FF);
  color: var(--color-ai, #6366F1);
  border: 1px solid var(--color-ai-border, #C7D2FE);
}

.peer-curve__badge--real {
  background: var(--color-status-success-bg);
  color: var(--color-status-success-text);
  border: 1px solid var(--color-status-success-border);
}

.peer-curve__badge--lowconf {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
  border: 1px solid var(--color-status-warning-border);
}