/* ── Competency Section (Epic 1.5) ──────────────────────────────── */

/* Section header */
.competency {}

/* ── Role Maturity gauge ─────────────────────────────────────────── */

.maturity-gauge {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.maturity-gauge__hero {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.maturity-gauge__score {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: 1;
  color: var(--color-text-primary);
  transition: color 0.3s;
}

.maturity-gauge__score--at-risk      { color: var(--color-band-at-risk); }
.maturity-gauge__score--stabilizing  { color: var(--color-band-stabilizing); }
.maturity-gauge__score--competitive  { color: var(--color-band-competitive); }
.maturity-gauge__score--leading      { color: var(--color-band-leading); }

.maturity-gauge__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.maturity-gauge__band-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.maturity-gauge__band-chip--at-risk      { background: rgba(220,38,38,0.12);  color: var(--color-band-at-risk); }
.maturity-gauge__band-chip--stabilizing  { background: rgba(234,88,12,0.12);  color: var(--color-band-stabilizing); }
.maturity-gauge__band-chip--competitive  { background: rgba(202,138,4,0.12);  color: var(--color-band-competitive); }
.maturity-gauge__band-chip--leading      { background: rgba(22,163,74,0.12);  color: var(--color-band-leading); }

/* ── Coverage bars ───────────────────────────────────────────────── */

.coverage-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.coverage-bar {
  display: grid;
  grid-template-columns: 120px 1fr 36px;
  align-items: center;
  gap: var(--space-3);
}

.coverage-bar__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: right;
}

.coverage-bar__track {
  height: 8px;
  background: var(--color-neutral-subtle, #F3F4F6);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.coverage-bar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary, #2563eb);
  transition: width 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.coverage-bar__fill--at-risk      { background: var(--color-band-at-risk); }
.coverage-bar__fill--stabilizing  { background: var(--color-band-stabilizing); }
.coverage-bar__fill--competitive  { background: var(--color-band-competitive); }
.coverage-bar__fill--leading      { background: var(--color-band-leading); }

.coverage-bar__value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* ── Salary Alignment callout ────────────────────────────────────── */

.salary-alignment {
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid transparent;
}

.salary-alignment--underpaid {
  background: rgba(22,163,74,0.06);
  border-left-color: var(--color-band-leading);
}

.salary-alignment--overpaid {
  background: rgba(234,88,12,0.06);
  border-left-color: var(--color-band-stabilizing);
}

.salary-alignment--aligned {
  background: rgba(37,99,235,0.05);
  border-left-color: var(--color-primary, #2563eb);
}

.salary-alignment__headline {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.salary-alignment__detail {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* nudge shown when no salary provided */
.salary-nudge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-neutral-subtle, #F3F4F6);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.salary-nudge__icon { font-size: 16px; }

/* ── Missing competencies list ───────────────────────────────────── */

.missing-competencies {}

.missing-competencies__intro {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.missing-competencies__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.missing-competencies__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-neutral-subtle, #F3F4F6);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.missing-competencies__impact {
  font-size: 10px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.missing-competencies__impact--high   { background: rgba(220,38,38,0.10); color: var(--color-band-at-risk); }
.missing-competencies__impact--medium { background: rgba(234,88,12,0.10); color: var(--color-band-stabilizing); }

/* ── AI badge / low confidence ───────────────────────────────────── */

.competency-section__ai-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.competency-section__low-conf {
  font-size: var(--text-xs);
  color: var(--color-band-stabilizing);
  font-style: italic;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .coverage-bar__fill { transition: none; }
}