/* Grade badges — one beautiful pill per 10-point grade tier (0–10, 11–20, … 91–100).
 * Used by Pages/Shared/_GradeBadge.cshtml, shown next to test titles. */

.rt-grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 5px 3px 4px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2px;
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  background: linear-gradient(135deg, #64748b, #94a3b8);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .25),
              inset 0 1px 0 rgba(255, 255, 255, .30);
  transition: transform .12s ease, box-shadow .12s ease;
}

.rt-grade-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(16, 24, 40, .30),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}

.rt-grade-badge .rt-grade-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.rt-grade-badge .rt-grade-label {
  padding: 0 2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.rt-grade-badge .rt-grade-score {
  background: rgba(255, 255, 255, .94);
  color: #1E2433;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

/* Tier gradients: red (low) → amber → green → blue → violet (top). */
.rt-grade-t0 { background: linear-gradient(135deg, #7f1d1d, #b91c1c); }
.rt-grade-t1 { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.rt-grade-t2 { background: linear-gradient(135deg, #c2410c, #f97316); }
.rt-grade-t3 { background: linear-gradient(135deg, #d97706, #f59e0b); }
.rt-grade-t4 { background: linear-gradient(135deg, #ca8a04, #eab308); }
.rt-grade-t5 { background: linear-gradient(135deg, #65a30d, #84cc16); }
.rt-grade-t6 { background: linear-gradient(135deg, #16a34a, #22c55e); }
.rt-grade-t7 { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.rt-grade-t8 { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.rt-grade-t9 { background: linear-gradient(135deg, #7c3aed, #c026d3); }

/* Tier-tinted glow so each badge feels distinct. */
.rt-grade-t0:hover { box-shadow: 0 5px 14px rgba(185, 28, 28, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t1:hover { box-shadow: 0 5px 14px rgba(239, 68, 68, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t2:hover { box-shadow: 0 5px 14px rgba(249, 115, 22, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t3:hover { box-shadow: 0 5px 14px rgba(245, 158, 11, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t4:hover { box-shadow: 0 5px 14px rgba(234, 179, 8, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t5:hover { box-shadow: 0 5px 14px rgba(132, 204, 22, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t6:hover { box-shadow: 0 5px 14px rgba(34, 197, 94, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t7:hover { box-shadow: 0 5px 14px rgba(20, 184, 166, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t8:hover { box-shadow: 0 5px 14px rgba(59, 130, 246, .45), inset 0 1px 0 rgba(255,255,255,.35); }
.rt-grade-t9:hover { box-shadow: 0 5px 14px rgba(192, 38, 211, .45), inset 0 1px 0 rgba(255,255,255,.35); }

/* Champion tier (91–100) gets a gentle shimmer. */
.rt-grade-t9 .rt-grade-ico {
  background: rgba(255, 255, 255, .30);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45),
              0 0 8px rgba(255, 230, 150, .55);
}

/* Not-yet-graded: quiet, theme-aware neutral chip. */
.rt-grade-badge.rt-grade-none {
  color: var(--muted, #5B6472);
  background: var(--surface-2, #F1F3F7);
  box-shadow: inset 0 0 0 1px var(--border, #E4E7EC);
}
.rt-grade-badge.rt-grade-none:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--border, #E4E7EC);
}
.rt-grade-badge.rt-grade-none .rt-grade-ico {
  background: rgba(0, 0, 0, .05);
  box-shadow: none;
}