/*
 * comment-winner-picker.css — per-tool styles for the Comment & List Winner Picker.
 * Only the classes not covered by the shared component/utility layers:
 * the winners-per-draw number input, the winner cards, and the draw history.
 * Tokens only; no inline styles (CSP: style-src 'self').
 */

/* Narrow the "number of winners" spinner so it doesn't stretch full width. */
.cwp-num {
  max-width: 8rem;
}

/* Winner cards — one per drawn winner, revealed after a draw. */
.cwp-winners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.cwp-winner-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--success-50);
  border: 1px solid var(--success-200);
  border-radius: var(--radius-md);
}

.cwp-winner-rank {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--success-500);
  color: var(--text-on-brand);
  font: 700 var(--text-sm-size) var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.cwp-winner-name {
  font: 600 var(--text-lg-size)/var(--text-lg-line) var(--font-sans);
  color: var(--text-primary);
  word-break: break-word;
  min-width: 0;
}

/* Draw history — most recent first. */
.cwp-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.cwp-history-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.cwp-history-count {
  flex: none;
}

.cwp-history-names {
  color: var(--text-secondary);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  word-break: break-word;
  min-width: 0;
}