/* ============================================================
   Mysterious Matters — roles.css

   Members get no badge at all — the plainness is the point. Staff
   stand out by contrast with the ordinary case, not because every
   label is fighting for attention. Two tiers only:

     Moderator — teal, the accent already used for "active/on" states
                 throughout the site (watch buttons, live indicators).
     Admin     — amber, the site's one reserved "important" accent
                 (the primary action button, the brand mark's centre).
                 Admin gets a hairline glow the moderator badge doesn't,
                 so the two read as adjacent tiers, not two colours of
                 the same thing.

   Load after app.css, anywhere in the head.
   ============================================================ */

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  font: 700 7px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.role-badge svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
  stroke: none;
}

.role-moderator {
  border: 1px solid rgba(95, 208, 207, .38);
  background: rgba(95, 208, 207, .09);
  color: var(--teal2);
}

.role-admin {
  border: 1px solid rgba(232, 180, 90, .45);
  background: rgba(232, 180, 90, .11);
  color: var(--amber2);
  box-shadow: 0 0 10px rgba(232, 180, 90, .12);
}

/* Where a role badge sits beside a custom user title, give it room
   to breathe rather than crowding the title text. */
.role:has(.role-badge) {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---- Header account avatar: a quiet ring, not a badge ----
   The header is the single most-seen surface in the admin's own
   session, so the distinction lives here too — just as a ring colour,
   not a label, since a label on your own avatar would be telling you
   something you already know. */
.account-avatar.role-moderator {
  border-color: rgba(95, 208, 207, .55);
}
.account-avatar.role-admin {
  border-color: rgba(232, 180, 90, .6);
  box-shadow: 0 0 0 2px rgba(232, 180, 90, .1);
}

.drawer-me.role-admin { color: var(--amber2); }
.drawer-me.role-admin > :first-child {
  border-color: rgba(232, 180, 90, .55);
  box-shadow: 0 0 0 2px rgba(232, 180, 90, .1);
}
.drawer-me.role-moderator > :first-child {
  border-color: rgba(95, 208, 207, .55);
}