/* ─────────────────────────────────────────────────────────
   role.css — MEA Hub Role Badges & Role-Gated Sections
   ───────────────────────────────────────────────────────── */

/* ── Role Badge ─────────────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

.role-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Member */
.role-badge.role-member {
  background: rgba(74, 90, 109, 0.2);
  color: #8A9AAD;
  border: 1px solid rgba(74, 90, 109, 0.3);
}
.role-badge.role-member .role-badge-dot {
  background: #8A9AAD;
}

/* Admin */
.role-badge.role-admin {
  background: rgba(129, 212, 250, 0.1);
  color: #81D4FA;
  border: 1px solid rgba(129, 212, 250, 0.2);
}
.role-badge.role-admin .role-badge-dot {
  background: #81D4FA;
  box-shadow: 0 0 4px rgba(129, 212, 250, 0.5);
}

/* Owner */
.role-badge.role-owner {
  background: rgba(255, 183, 77, 0.1);
  color: #FFB74D;
  border: 1px solid rgba(255, 183, 77, 0.2);
}
.role-badge.role-owner .role-badge-dot {
  background: #FFB74D;
  box-shadow: 0 0 4px rgba(255, 183, 77, 0.5);
}

/* ── Role Section Markers ───────────────────────────────── */
.role-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

.role-section-tag.tag-admin {
  color: rgba(129, 212, 250, 0.5);
}

.role-section-tag.tag-owner {
  color: rgba(255, 183, 77, 0.5);
}