/* ═══════════════════════════════════════════════════════════════════
   Components: Pills, Tags, Risk Badges
   ═══════════════════════════════════════════════════════════════════ */

.pill, .tag, .risk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.pill-row { display: flex; gap: 12px; flex-wrap: wrap; }

.pill {
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(25, 38, 43, 0.08);
}

.pill.subtle {
  background: rgba(201, 165, 106, 0.16);
}

.tag {
  background: rgba(40, 72, 66, 0.1);
  color: var(--color-accent-600);
}

.eyebrow,
.section-kicker,
.panel-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow,
.panel-label {
  background: rgba(168, 78, 47, 0.1);
  color: var(--color-brand-800);
}

.section-kicker {
  background: rgba(40, 72, 66, 0.08);
  color: var(--color-accent-600);
  margin-bottom: 14px;
}

/* Risk level badges */
.risk.high {
  background: var(--color-risk-high-bg);
  color: var(--color-risk-high);
}

.risk.medium {
  background: var(--color-risk-medium-bg);
  color: var(--color-risk-medium);
}

.risk.low {
  background: var(--color-risk-low-bg);
  color: var(--color-risk-low);
}

.risk.blocked {
  background: var(--color-risk-blocked-bg);
  color: var(--color-risk-blocked);
}

/* Design-tokens style pills */
.fy-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: rgba(136, 168, 222, 0.22);
  color: var(--color-blue-500);
  font-size: 0.9rem;
  font-weight: var(--weight-bold);
}

.fy-pill.blue  { background: rgba(136, 168, 222, 0.22); color: var(--color-blue-500); }
.fy-pill.coral { background: rgba(244, 141, 114, 0.2);  color: var(--color-coral-700); }
.fy-pill.ink   { background: rgba(23, 37, 56, 0.09);    color: var(--color-ink); }

.fy-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.fy-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: rgba(136, 168, 222, 0.22);
  color: var(--color-blue-500);
  font-size: 0.9rem;
  font-weight: var(--weight-bold);
}