/* Trust grade
   A letter grade from A to F, coloured on a fixed scale. Set the grade with
   data-grade (a, b, c, d, e, f). Use the circle by default or data-variant="pill"
   for a labelled pill. Grade colours come from the console theme in tokens.css. */

.dp-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--dp-radius-full);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-white);
  background: var(--dp-grade-c);
  text-transform: uppercase;
}

.dp-grade[data-grade="a"] { background: var(--dp-grade-a); }
.dp-grade[data-grade="b"] { background: var(--dp-grade-b); }
.dp-grade[data-grade="c"] { background: var(--dp-grade-c); color: var(--dp-brand-purple, #2d145f); }
.dp-grade[data-grade="d"] { background: var(--dp-grade-d); }
.dp-grade[data-grade="e"] { background: var(--dp-grade-e); }
.dp-grade[data-grade="f"] { background: var(--dp-grade-f); }

.dp-grade[data-size="lg"] {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--dp-text-lg);
}

/* Pill variant: letter plus a label */
.dp-grade[data-variant="pill"] {
  width: auto;
  height: auto;
  gap: var(--dp-space-2);
  padding: 4px var(--dp-space-3);
  border-radius: var(--dp-radius-full);
  font-size: var(--dp-text-xs);
  font-weight: var(--dp-weight-bold);
}