/* Client-rating badge — small discreet capsule pill showing the tier code.
 * Scoped by the .rating-badge prefix. Pastel bg/fg pairs, one per tier.
 * Reuses no global tokens (intentionally self-contained pastel palette). */

.rating-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  background: #eef0f3;
  color: #6b7280;
}

/* GS — gold */
.rating-badge--gs {
  background: #fdf3d7;
  color: #8a6d1a;
}

/* Aaa / Aa — green */
.rating-badge--aaa,
.rating-badge--aa {
  background: #e3f4e6;
  color: #2f7a44;
}

/* A — blue */
.rating-badge--a {
  background: #e4eefb;
  color: #2f5d9e;
}

/* B — neutral blue-grey */
.rating-badge--b {
  background: #eaeef4;
  color: #4f6079;
}

/* C — orange */
.rating-badge--c {
  background: #fcecd9;
  color: #99611d;
}

/* D — grey */
.rating-badge--d {
  background: #eef0f3;
  color: #6b7280;
}

/* ── #134 dark mode overrides ─────────────────────────────── */
/* Every tier is a pale pastel slab with a dark ink label — the exact inversion
   of what a dark surface needs. Each pair keeps its tier hue but becomes a
   translucent tint over the row plus a light saturated label, so the badges
   still read as a graded scale (gold → green → blue → slate → orange → grey)
   rather than six identical grey capsules. Contrast is >= 7:1 on #1e293b. */
html[data-theme="dark"] .rating-badge {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
}

/* GS — gold */
html[data-theme="dark"] .rating-badge--gs {
  background: rgba(234, 179, 8, 0.18);
  color: #fcd34d;
}

/* Aaa / Aa — green */
html[data-theme="dark"] .rating-badge--aaa,
html[data-theme="dark"] .rating-badge--aa {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

/* A — blue */
html[data-theme="dark"] .rating-badge--a {
  background: rgba(59, 130, 246, 0.20);
  color: #93c5fd;
}

/* B — neutral blue-grey. Deliberately a touch cooler and more opaque than the
   D/base grey so the two neighbouring tiers stay distinguishable. */
html[data-theme="dark"] .rating-badge--b {
  background: rgba(100, 116, 139, 0.30);
  color: #b8c4d6;
}

/* C — orange */
html[data-theme="dark"] .rating-badge--c {
  background: rgba(249, 115, 22, 0.18);
  color: #fdba74;
}

/* D — grey */
html[data-theme="dark"] .rating-badge--d {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
}