/* Grade badge — compliance-grade (audited runtime) vs casual (skill-driven).
 * Mono pill, glass/subtle tint. Semantic chip, so its icon takes the chip
 * colour. Theme-aware. */

.kw-grade {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-family: var(--kw-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
  border-radius: var(--kw-radius-pill);
  border: 1px solid;
  white-space: nowrap;
}

.kw-grade--compliance {
  background: #E6F7EF;
  color: #1B8E5A;
  border-color: #B6E6CF;
}
html.dark .kw-grade--compliance {
  background: rgba(43, 182, 115, 0.12);
  color: #36C588;
  border-color: rgba(43, 182, 115, 0.32);
}

.kw-grade--casual {
  background: #F1ECFB;
  color: #6B43C9;
  border-color: #DDD0F4;
}
html.dark .kw-grade--casual {
  background: rgba(131, 82, 232, 0.14);
  color: #B79AF2;
  border-color: rgba(131, 82, 232, 0.34);
}

/* Larger variant used in the detail hero. */
.kw-grade--lg {
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem 0.375rem 0.5rem;
}

/* Warning chip — shown to admins when declared grade doesn't match wiring. */
.kw-grade-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--kw-font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--kw-radius-pill);
  background: #FEF6DC;
  color: var(--kw-yellow-ink);
  border: 1px solid #F6E0A0;
}
html.dark .kw-grade-warning {
  background: rgba(253, 202, 19, 0.10);
  color: var(--kw-signal-gold);
  border-color: rgba(253, 202, 19, 0.30);
}